/* Global mobile responsiveness improvements for all static pages */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

html {
  overflow-x: clip;
}

:root {
  --mobile-page-gap: 0.85rem;
  --mobile-content-max: 100%;
  --mobile-section-space: 1rem;
  --mobile-card-gap: .85rem;
  --mobile-safe-top: env(safe-area-inset-top);
  --mobile-safe-right: env(safe-area-inset-right);
  --mobile-safe-bottom: env(safe-area-inset-bottom);
  --mobile-safe-left: env(safe-area-inset-left);
}

body {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: normal;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

.hidden {
  display: none !important;
}

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

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
}

picture {
  display: block;
  max-width: 100%;
}

video {
  display: block;
}

iframe {
  border: 0;
}

[style*="width:"] {
  max-width: 100%;
}

[style*="position:fixed"],
[style*="position: fixed"] {
  max-width: 100vw;
}

input, select, textarea, button {
  max-width: 100%;
  font-size: 16px;
}

button,
[role="button"],
a.button,
input[type="button"],
input[type="submit"] {
  min-height: 44px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Keep native media/components from expanding viewport */
audio,
embed,
object {
  max-width: 100%;
}

/* Make background images and banners adapt better on phones */
[style*="background-image"],
.hero,
.hero-banner,
.hero-section {
  background-size: cover;
  background-position: center;
}

main, section, article, aside {
  min-width: 0;
}

section,
.section,
.container,
[class*="container"] {
  min-width: 0;
}

a, button {
  touch-action: manipulation;
}

/* Global overflow protection for unknown legacy wrappers */
#app,
#root,
#page,
.page,
.page-wrap,
.layout,
.wrapper,
.content,
.section-wrap,
.inner,
.panel {
  min-width: 0;
  max-width: 100%;
}

/* Shared layout helpers used by multiple pages */
#nav-links,
#lang-options,
[id*="lang-options"] {
  max-width: 100%;
}

#lang-options,
[id*="lang-options"] {
  z-index: 70;
}

.carousel-arrow {
  min-width: 44px;
  min-height: 44px;
}

/* Prevent long text/URLs from breaking layout */
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th, label {
  overflow-wrap: anywhere;
}
/* Keep navigation labels intact on desktop (German labels were breaking mid-word). */
nav #nav-links a,
#nav-links a {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  white-space: nowrap;
}

ul,
ol {
  padding-left: 1.15rem;
}

/* Common fixed page wrappers */
main, .main-content, #main-content, #content {
  width: 100%;
  max-width: 100%;
}

.container,
[class*="container"] {
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

/* Universal wrappers used by exported legacy pages */
.page-shell,
.page-container,
.page-content,
.layout-shell,
.content-shell,
.main-shell,
.content-grid,
.two-col,
.three-col,
.desktop-grid,
.desktop-row,
.desktop-layout {
  max-width: 100%;
  min-width: 0;
}

/* Safer defaults for unknown cards and sections */
.card,
.content-card,
.info-card,
.feature-card,
.service-card,
.panel,
.box,
.tile,
.item {
  min-width: 0;
  max-width: 100%;
}

.responsive-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.responsive-scroll-x > * {
  min-width: max-content;
}

.responsive-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: .75rem;
}

.responsive-media iframe,
.responsive-media video {
  width: 100% !important;
  height: auto !important;
}

/* Prevent utility classes from forcing overflow */
[class*="w-"],
[class*="max-w-"],
[class*="min-w-"] {
  min-width: 0;
}

/* Mobile/tablet-first refinements */
@media (max-width: 1023px) {
  /* Mobile overflow fixes for legacy Webflow decor */
  .header_bg-img-wrapper-decktop,
  .header_bg-img-component,
  .header_bg-img-grid,
  .header_bg-img-item,
  .header_bg-lottie-item,
  .header_lottie-wrapper,
  .direction_circle-left,
  .direction_circle-right,
  .direction_circle,
  .fintech_image-absolute,
  .health_image-absolute,
  .fintech_image-line-wrapper,
  .health_image-line-wrapper {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .header_bg-img-wrapper-decktop,
  .header_bg-img-component {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  /* Force large hero sections to single column */
  .header_heading-wrapper,
  .section_direction,
  .section_reasons,
  .section_header,
  .section_header-grid,
  .section_header-content,
  .section_header-visual,
  .header_bg-img-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Generic overflow guard for panels */
  .work-feature-panel,
  .works-stage-presentations,
  .modern-slider-wrap,
  .modern-slider-core,
  .slide-panel,
  .presentation-panel,
  .panel,
  .card {
    max-width: 100% !important;
    overflow-x: clip;
  }

  .modern-slider-wrap {
    padding: 1rem !important;
    border-radius: 1.2rem !important;
  }

  .modern-slider-preview {
    display: none !important;
  }

  /* Nav label safety */
  #nav-links a {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }

  .site-header nav,
  nav[aria-label="Main navigation"] {
    width: 100%;
  }

  .nav-shell {
    width: 100% !important;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
    flex-wrap: wrap;
    gap: .6rem;
  }

  .brand-cluster {
    flex-wrap: wrap;
    gap: .5rem;
  }

  #nav-links {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  #nav-links li {
    flex: 1 1 auto;
  }

  #nav-links a {
    text-align: center;
  }

  #lang-options,
  [id*="lang-options"] {
    max-width: min(280px, 92vw);
    min-width: 0;
    right: 0;
    left: auto;
  }
}

@media (max-width: 1023px) {
  html {
    font-size: 15.5px;
  }

  nav .max-w-6xl,
  nav .max-w-7xl,
  nav .max-w-5xl,
  nav .max-w-4xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .fixed.w-full.top-0 {
    width: 100%;
    max-width: 100vw;
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl {
    width: 100%;
    max-width: 100%;
  }

  [class*="max-w-"] {
    max-width: 100% !important;
  }

  .w-screen,
  [class*="w-screen"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [class*="min-w-"] {
    min-width: 0 !important;
  }

  .min-h-screen {
    min-height: 100dvh;
  }

  body {
    padding-left: max(var(--mobile-page-gap), var(--mobile-safe-left));
    padding-right: max(var(--mobile-page-gap), var(--mobile-safe-right));
    padding-bottom: max(.85rem, var(--mobile-safe-bottom));
  }

  body > * {
    max-width: 100%;
  }

  section,
  article,
  aside,
  header,
  footer {
    max-width: 100%;
    min-width: 0;
  }

  nav {
    left: 0;
    right: 0;
    margin: 0;
  }

  nav + * {
    scroll-margin-top: 6.5rem;
  }

  nav .relative.max-w-6xl,
  nav .relative.max-w-7xl {
    row-gap: .65rem;
  }

  .fixed,
  .sticky {
    max-width: 100vw;
  }

  .absolute {
    max-width: min(100vw, 100%);
  }

  .left-1\/2,
  .right-1\/2,
  .translate-x-1\/2,
  .-translate-x-1\/2 {
    max-width: 100%;
  }

  [class*="left-"] {
    max-width: 100vw;
  }

  /* Reduce wide cards/images in work pages */
  .h-80,
  .h-72,
  .h-64 {
    height: auto !important;
    min-height: 12rem;
  }

  .w-60,
  .w-64,
  .w-72 {
    width: 100% !important;
    max-width: 100%;
  }

  /* Toast/modal placement */
  #toast {
    right: .75rem !important;
    left: .75rem;
    bottom: .75rem !important;
    width: auto;
    text-align: center;
    border-radius: .75rem;
  }

  #modal > div,
  [id*="modal"] > div {
    width: min(100%, 42rem);
    max-height: 85dvh;
    overflow-y: auto;
  }

  /* Improve multi-column sections on tablets */
  .lg\:grid-cols-4,
  .lg\:grid-cols-3,
  .md\:grid-cols-3,
  .md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid,
  [class*="grid-cols-"] {
    min-width: 0;
  }

  .grid-cols-4,
  .grid-cols-3 {
    gap: .9rem;
  }

  .lg\:flex,
  .md\:flex-row {
    flex-direction: column !important;
  }

  .flex-row,
  .sm\:flex-row {
    flex-wrap: wrap;
  }

  [class*="md:flex-row"],
  [class*="lg:flex-row"] {
    flex-direction: column !important;
  }

  .md\:flex-row-reverse,
  .lg\:flex-row-reverse {
    flex-direction: column !important;
  }

  .lg\:space-x-12,
  .lg\:space-x-10,
  .md\:space-x-8,
  .md\:space-x-6 {
    --tw-space-x-reverse: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
    row-gap: 1.25rem;
  }

  /* Better readability on medium screens */
  .text-5xl { font-size: clamp(2rem, 4.8vw, 2.7rem) !important; }
  .text-4xl { font-size: clamp(1.8rem, 4.2vw, 2.3rem) !important; }
  .text-3xl { font-size: clamp(1.6rem, 3.8vw, 2rem) !important; }
  .text-2xl { font-size: clamp(1.3rem, 3.2vw, 1.6rem) !important; }

  /* all_works / headliner style pages */
  h1#entry-title,
  h1[data-i18n="allworks_title"],
  h1 {
    font-size: clamp(2rem, 7vw, 3.2rem) !important;
    line-height: 1.1;
  }

  .content-container {
    border-radius: 1rem !important;
    padding: 1rem !important;
  }

  .content-row,
  .mid-row,
  .diagram-row {
    gap: .9rem;
  }

  .downloads,
  .button-row,
  .action-row {
    gap: .65rem;
  }

  #main-image,
  #small-image,
  .diagram-image {
    width: 100% !important;
    max-height: none !important;
  }

  #quick-links {
    width: 100%;
    align-items: stretch;
  }

  #quick-links button,
  #prev-page,
  #next-page {
    min-height: 2.65rem;
  }

  .content-row,
  .mid-row,
  .downloads,
  .modal-grid,
  .grid-2,
  .process-wrap,
  .job-list,
  .timeline-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .content-row > *,
  .mid-row > * {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rounded-2xl,
  .rounded-3xl,
  .rounded-xl {
    border-radius: .95rem !important;
  }

  .shadow-xl,
  .shadow-2xl {
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
  }

  [class*="aspect-"] {
    aspect-ratio: auto !important;
  }
}

@media (max-width: 767px) {
  /* Phone-specific single-column enforcement */
  .header_heading-wrapper,
  .section_direction,
  .section_reasons,
  .section_header,
  .section_header-grid,
  .section_header-content,
  .section_header-visual,
  .header_bg-img-grid,
  .header_bg-img-item {
    display: block !important;
    width: 100% !important;
  }

  .works-stage-presentations,
  .work-feature-panel,
  .modern-slider-wrap,
  .modern-slider-core,
  .presentation-panel,
  .slide-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .modern-slider-core {
    min-height: auto !important;
  }

  .modern-slider-wrap {
    padding: .85rem !important;
  }

  /* Forms and CTAs stay tap-friendly */
  .cta,
  .cta-group,
  .form-grid,
  form {
    width: 100% !important;
  }

  .cta button,
  .cta a,
  .cta-group button,
  .cta-group a,
  form button,
  form input[type="submit"],
  form input[type="button"] {
    min-height: 44px;
  }

  #nav-links {
    flex-wrap: wrap;
    overflow-x: hidden;
  }

  #nav-links a {
    white-space: normal;
  }

  table,
  .overflow-x-auto table,
  [class*="overflow-x-auto"] table {
    min-width: 0 !important;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
  }

  section,
  article,
  main,
  .section,
  .page-section {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }

  html,
  body {
    min-height: 100dvh;
  }

  .px-6,
  .px-8,
  .px-10,
  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-4,
  .sm\:px-6,
  .md\:px-8,
  .lg\:px-10 {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  .py-4,
  .py-6 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }

  body {
    padding-left: .65rem;
    padding-right: .65rem;
    padding-top: max(.15rem, var(--mobile-safe-top));
  }

  body.has-fixed-nav {
    padding-top: calc(var(--mobile-nav-offset, 0px) + .2rem);
  }

  .pt-32,
  .pt-28 {
    padding-top: 6.7rem !important;
  }

  .pt-24,
  .pt-20 {
    padding-top: 6.5rem !important;
  }

  .pb-16,
  .pb-20,
  .py-16,
  .py-20 {
    padding-bottom: 2.75rem !important;
  }

  .mt-16,
  .mt-20 {
    margin-top: 2.5rem !important;
  }

  .hidden-mobile {
    display: none !important;
  }

  /* Disable hover-only effects on touch devices */
  .hover\:scale-105:hover,
  .hover\:-translate-y-1:hover,
  .hover\:shadow-2xl:hover,
  .hover\:shadow-xl:hover,
  .hover\:bg-black:hover,
  .hover\:text-white:hover {
    transform: none !important;
    box-shadow: inherit !important;
    background: inherit;
    color: inherit;
  }

  [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [class*="grid-cols-3"],
  [class*="grid-cols-2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  [class*="col-span-2"],
  [class*="col-span-3"],
  [class*="col-span-4"] {
    grid-column: span 1 / span 1 !important;
  }

  .text-5xl { font-size: 1.75rem !important; }
  .text-4xl { font-size: 1.55rem !important; }
  .text-3xl { font-size: 1.35rem !important; }
  .text-2xl { font-size: 1.2rem !important; }
  .text-xl { font-size: 1.05rem !important; }

  nav {
    backdrop-filter: saturate(110%) blur(1px);
  }

  nav .text-2xl {
    font-size: 1.22rem !important;
  }

  #nav-links {
    padding: .35rem;
    border-radius: .65rem;
    gap: .45rem !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  #nav-links::-webkit-scrollbar {
    height: 4px;
  }

  #nav-links::-webkit-scrollbar-thumb {
    background: rgba(30, 58, 138, 0.38);
    border-radius: 999px;
  }

  #nav-links li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  nav .flex.items-center.gap-4,
  nav .flex.items-center.gap-3 {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  nav [id*="lang-selector"],
  nav [id*="lang-options"] {
    flex-shrink: 0;
  }

  #nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .45rem .8rem !important;
    font-size: .86rem;
    white-space: nowrap;
  }

  #lang-options,
  [id*="lang-options"] {
    min-width: 3.2rem;
  }

  [id*="lang-btn"],
  [id*="lang-toggle"],
  #lang-btn,
  #language-toggle {
    min-height: 2.4rem;
  }

  /* Home page category pills */
  .sector-label {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 3.2rem;
    padding: .75rem 1rem;
    border-radius: 1rem !important;
  }

  .domain-card {
    width: 100%;
  }

  /* Forms across contact, join, wizard, login pages */
  form,
  .form-grid,
  [class*="grid gap-"] {
    width: 100%;
  }

  .form-grid,
  form,
  .modal-grid,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .container,
  .content-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  form [style*="grid-column:1/-1"] {
    grid-column: auto !important;
  }

  form {
    gap: .8rem;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  input,
  select,
  textarea {
    min-height: 2.65rem;
  }

  label {
    display: inline-block;
    margin-bottom: .35rem;
  }

  textarea {
    min-height: 120px;
  }

  .inline-flex.gap-4,
  .flex.gap-4,
  .flex.gap-3 {
    flex-wrap: wrap;
    width: 100%;
  }

  /* Keep mixed desktop row structures readable on phones */
  [class*="row"],
  [class*="columns"],
  [class*="two-column"],
  [class*="three-column"] {
    min-width: 0;
    max-width: 100%;
  }

  .inline-flex.gap-4 > *,
  .flex.gap-4 > *,
  .flex.gap-3 > * {
    flex: 1 1 100%;
  }

  [class*="justify-between"] {
    gap: .5rem;
  }

  /* Dashboard pages (account / myfiles) */
  body.flex.h-screen {
    min-height: 100dvh;
    height: auto;
  }

  #sidebar {
    width: min(86vw, 320px) !important;
  }

  #sidebar-toggle {
    top: auto !important;
    bottom: 1rem !important;
    left: .5rem !important;
    transform: none !important;
    border-radius: .5rem !important;
    padding: .5rem .6rem !important;
    line-height: 1;
  }

  .md\:ml-60 {
    margin-left: 0 !important;
  }

  #action-menu {
    position: sticky;
    top: 0;
    grid-template-columns: 1fr !important;
  }

  #action-menu button {
    width: 100%;
  }

  #welcome {
    right: .75rem !important;
    top: .5rem !important;
    font-size: .75rem !important;
    background: rgba(255,255,255,.9);
    padding: .2rem .45rem;
    border-radius: .4rem;
  }

  #detail-modal {
    padding: 1rem !important;
    align-items: center !important;
  }

  /* Full-width cards/content blocks */
  .rounded-2xl,
  .rounded-xl {
    border-radius: .85rem !important;
  }

  .shadow-xl,
  .shadow-lg {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
  }

  .w-48.h-48.rounded-full {
    width: 9rem !important;
    height: 9rem !important;
  }

  /* Hero / carousel sections */
  [style*="100vh - 180px"],
  [style*="100vh-180px"] {
    height: clamp(220px, 55dvh, 560px) !important;
  }

  .carousel-arrow {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1rem;
  }

  /* Dashboard cards/statistics */
  #stats-grid,
  [class*="sm:grid-cols-4"],
  [class*="sm:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Button groups / tab bars */
  .tab-button {
    width: 100%;
    text-align: center;
  }

  [class*="gap-3"] > .tab-button,
  [class*="gap-4"] > .tab-button {
    margin-top: .25rem;
  }

  /* Table-like content in mobile */
  table,
  .overflow-x-auto,
  [class*="overflow-x-auto"] {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-x-auto table,
  table {
    min-width: 420px;
  }

  .content-row table,
  .mid-row table,
  .diagram-row table {
    min-width: 380px;
  }

  /* Legacy page sections with broad inline spacing */
  [style*="padding: 40px"],
  [style*="padding:40px"],
  [style*="padding: 48px"],
  [style*="padding:48px"],
  [style*="margin: 40px"],
  [style*="margin:40px"] {
    padding: 1rem !important;
    margin: 0 !important;
  }

  [class*="sticky"] {
    top: 0;
  }

  [class*="fixed"] {
    max-width: 100vw;
  }

  /* Home page service / sector chips */
  .sector-label {
    font-size: .93rem;
    text-align: center;
  }

  #service-cards,
  #domains-grid,
  #stats-grid {
    gap: .85rem !important;
  }

  /* about / contact image presentation */
  .w-48.h-48.rounded-full,
  .rounded-full.w-48.h-48 {
    width: 8rem !important;
    height: 8rem !important;
  }

  /* join us page custom blocks */
  .circle {
    width: 5.4rem !important;
    height: 5.4rem !important;
    font-size: .9rem;
  }

  .manifesto {
    text-align: left;
    padding-left: .2rem;
    padding-right: .2rem;
  }

  .manifesto-row {
    align-items: flex-start;
    gap: .45rem;
  }

  .position-list {
    max-width: 100% !important;
  }

  .circle-grid,
  .process-grid,
  .cards-grid,
  .timeline-grid,
  .content-row {
    grid-template-columns: 1fr !important;
  }

  .h-screen,
  .min-h-screen,
  [style*="height:100vh"],
  [style*="height: 100vh"] {
    min-height: 100dvh !important;
    height: auto !important;
  }

  [style*="width: 50%"],
  [style*="width:50%"],
  [style*="width: 60%"],
  [style*="width:60%"],
  [style*="width: 70%"],
  [style*="width:70%"],
  [style*="width: 80%"],
  [style*="width:80%"] {
    width: 100% !important;
  }

  [style*="height: 480px"],
  [style*="height:480px"],
  [style*="height: 560px"],
  [style*="height:560px"],
  [style*="height: 640px"],
  [style*="height:640px"] {
    height: auto !important;
    min-height: 12rem !important;
  }

  #quick-links,
  .downloads,
  footer,
  .button-row,
  .action-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .downloads {
    grid-template-columns: 1fr !important;
  }

  #quick-links button,
  .downloads button,
  .downloads a,
  footer button,
  footer a,
  .button-row > *,
  .action-row > * {
    width: 100% !important;
  }

  /* account/myfiles dense card grids */
  #action-menu,
  #actionMenu,
  #file-list,
  #files-list {
    width: 100%;
  }

  [class*="grid-cols-4"],
  [class*="sm:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [class*="grid-cols-3"],
  [class*="sm:grid-cols-3"],
  [class*="md:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  .responsive-scroll-x {
    border-radius: .65rem;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .text-5xl { font-size: 1.65rem !important; }
  .text-4xl { font-size: 1.45rem !important; }
  .text-3xl { font-size: 1.28rem !important; }

  #sidebar {
    width: min(90vw, 300px) !important;
  }

  #sidebar-toggle {
    bottom: .65rem !important;
    left: .4rem !important;
  }

  .carousel-arrow {
    width: 2.1rem;
    height: 2.1rem;
  }

  #quick-links {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #quick-links button,
  #prev-page,
  #next-page,
  footer button,
  footer a {
    width: 100%;
  }

  footer {
    flex-direction: column;
    gap: .6rem;
  }

  .content-container {
    padding: .85rem !important;
  }

  /* File upload / dashboard actions should not overflow */
  input[type="file"] {
    width: 100%;
    font-size: .9rem !important;
  }

  .download-options,
  .dropdown,
  [class*="dropdown"] {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    min-width: 0 !important;
  }

  #toast,
  #welcome {
    right: .45rem !important;
    left: .45rem !important;
    width: auto !important;
  }

  #nav-links a {
    min-height: 2.2rem;
    font-size: .82rem;
    padding: .4rem .7rem !important;
  }

  #lang-options,
  [id*="lang-options"] {
    left: auto !important;
    right: 0;
    transform: none !important;
  }

  .container {
    padding-left: .2rem;
    padding-right: .2rem;
  }

  .download-toggle,
  .download-options a,
  .sector-label,
  button,
  a.button {
    min-height: 2.6rem;
  }

  .sector-label,
  .domain-card {
    padding: .65rem .8rem !important;
    font-size: .87rem !important;
  }

  .text-lg {
    font-size: 1rem !important;
  }
}

/* Extra hardening for legacy pages with fixed desktop values */
@media (max-width: 1023px) {
  body {
    overflow-x: hidden;
  }

  /* Force any inline block widths to shrink on tablets/phones */
  [style*="min-width"],
  [style*="min-width:"],
  [style*="width:"] {
    max-width: 100% !important;
  }

  /* Better spacing for dense CTA rows and long translated labels */
  #quick-links button,
  .download-toggle,
  .download-options a,
  .sector-label,
  .domain-card,
  #nav-links a {
    white-space: normal !important;
    line-height: 1.35;
    word-break: break-word;
  }

  .content-container,
  .downloads,
  .diagram-row,
  .diagram-image,
  .text-block,
  .process-wrap,
  .timeline-grid,
  .cards-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Keep fixed UI elements visible with safe-area support */
  #toast,
  #welcome,
  #sidebar-toggle {
    z-index: 80;
  }

  /* Avoid clipping in pages that rely on absolute overlays */
  .relative,
  .absolute,
  [class*="absolute"] {
    min-width: 0;
  }
}

@media (max-width: 767px) and (max-height: 450px) {
  nav {
    position: sticky !important;
    top: 0;
  }

  .pt-32,
  .pt-28,
  .pt-24,
  .pt-20 {
    padding-top: 1rem !important;
  }

  #nav-links,
  nav.mobile-nav-open #nav-links {
    max-height: 54dvh;
  }
}

/* Page-specific hardening for the OHS_APP_3_HTML screens */
@media (max-width: 1023px) {
  /* Keep all major page sections visually compact on tablet/mobile */
  #hero,
  #services,
  #about,
  #work,
  #contact,
  #intro,
  #jobs,
  #different,
  #process,
  #manifesto,
  #faq,
  #service-detail,
  #domain-selection,
  #service-selection {
    padding-left: .2rem !important;
    padding-right: .2rem !important;
    scroll-margin-top: 6.6rem;
  }

  /* Large CTA/button chips should fit narrow screens */
  .inline-block.bg-white,
  .inline-block.border,
  .download-toggle,
  .download-options a,
  .position-card,
  .domain-card,
  .sector-label {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent over-wide cards generated dynamically via JS */
  #service-cards > *,
  #service-detail-container > *,
  #domainList > *,
  #groupList > *,
  #stats-grid > *,
  #file-list > *,
  #files-list > * {
    min-width: 0;
    width: 100%;
  }

  /* Safer media sizing in content-heavy work pages */
  #main-image,
  #small-image,
  .diagram-image,
  .photo-area img,
  .photo-wrap img,
  .hero-image,
  .work-image {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  /* Keep mobile nav easy to scan and tap */
  nav .relative.max-w-6xl,
  nav .relative.max-w-7xl {
    gap: .5rem;
  }

  #nav-links {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }

  #nav-links li {
    flex: 1 1 calc(50% - .45rem);
    min-width: 8.2rem;
  }

  #nav-links a {
    width: 100%;
    text-align: center;
  }

  /* Strong stacking for all key two-column layouts */
  .pitch-row,
  .pitch-row.reverse,
  .grid-2,
  .form-grid,
  .modal-grid,
  .content-row,
  .mid-row,
  .diagram-row,
  .process-wrap,
  .timeline-grid,
  .cards-grid,
  .job-list,
  .circle-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
  }

  /* Contact/account/login/wizard forms */
  form,
  form .grid,
  form .flex,
  .form-actions,
  .button-row,
  .action-row {
    width: 100% !important;
  }

  form .flex,
  .form-actions,
  .button-row,
  .action-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .6rem !important;
  }

  form button,
  form a,
  .form-actions > *,
  .button-row > *,
  .action-row > * {
    width: 100% !important;
  }

  /* Dashboard pages: avoid cramped controls */
  #action-menu,
  #actionMenu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }

  #phones-container > div,
  #emails-container > div,
  #faxes-container > div,
  #locations-container > div {
    padding: .7rem;
  }

  #detail-modal > div,
  #upload-modal > div,
  #preview-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: .85rem !important;
  }
}

/* Extra broad mobile hardening for every page in OHS_APP_3_HTML */
@media (max-width: 1023px) {
  :root {
    --mobile-card-gap: .85rem;
  }

  /* Prevent fixed desktop wrappers from causing crop/zoom on phones */
  body,
  body > nav + *,
  body > main,
  body > section,
  body > article,
  body > div {
    max-width: 100%;
  }

  /* Legacy inline left/right margins from desktop pages */
  [style*="margin-left"],
  [style*="margin-right"],
  [style*="left:"],
  [style*="right:"] {
    max-width: 100% !important;
  }

  /* Make card-like blocks easier to read and tap */
  .card,
  .panel,
  .box,
  .content-container,
  .position-card,
  .download-section,
  .domain-card,
  .sector-label,
  #service-cards > div,
  #domainList > div,
  #groupList > label,
  #action-menu > button,
  #actionMenu > button,
  #file-list > div,
  #files-list > div {
    border-radius: .9rem !important;
    padding: .85rem !important;
    min-width: 0;
  }

  /* Make CTA clusters stack cleanly */
  #quick-links,
  .downloads,
  footer,
  .button-row,
  .action-row,
  .form-actions,
  .cta-row {
    gap: .6rem !important;
  }

  #quick-links > *,
  .downloads > *,
  .button-row > *,
  .action-row > *,
  .form-actions > *,
  .cta-row > * {
    min-width: 0;
  }

  /* Normalize old desktop hard-coded max-width wrappers */
  [style*="max-width: 1200px"],
  [style*="max-width:1200px"],
  [style*="max-width: 1100px"],
  [style*="max-width:1100px"],
  [style*="max-width: 1000px"],
  [style*="max-width:1000px"],
  [style*="width: 1200px"],
  [style*="width:1200px"],
  [style*="width: 1100px"],
  [style*="width:1100px"],
  [style*="width: 1000px"],
  [style*="width:1000px"] {
    width: 100% !important;
    max-width: var(--mobile-content-max) !important;
  }

  /* Improve readability for dense translated content */
  p,
  li,
  label,
  .text-block,
  .manifesto,
  .position-list,
  .download-options a {
    line-height: 1.55;
    letter-spacing: 0.01em;
  }

  /* Better image framing on content-heavy pages */
  .diagram-image,
  #main-image,
  #small-image,
  .hero-image,
  .work-image,
  .photo-area img,
  .photo-wrap img,
  .rounded-image,
  .team-image {
    border-radius: .8rem !important;
    background: #fff;
  }
}

@media (max-width: 767px) {
  /* Strong one-column layout for all custom row wrappers */
  .content-row,
  .mid-row,
  .diagram-row,
  .downloads,
  .job-list,
  .process-wrap,
  .cards-grid,
  .timeline-grid,
  .circle-grid,
  .manifesto-row,
  #phones-container,
  #emails-container,
  #faxes-container,
  #locations-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-card-gap, .8rem) !important;
  }

  /* Avoid giant desktop headlines breaking lines aggressively */
  h1,
  h2 {
    text-wrap: balance;
  }

  /* Mobile safe sticky controls */
  #sidebar-toggle,
  #toast,
  #welcome,
  .floating-btn {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    backdrop-filter: blur(2px);
  }

  /* Old gallery and downloads sections: force one-column flow */
  .gallery,
  .gallery-grid,
  .photo-grid,
  .download-grid,
  .files-grid,
  .report-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-card-gap, .8rem) !important;
  }

  /* Inputs/buttons should be full width in complex forms */
  form .inline-flex,
  form .flex,
  .form-grid .flex,
  .form-grid .inline-flex {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  form .inline-flex > *,
  form .flex > *,
  .form-grid .flex > *,
  .form-grid .inline-flex > * {
    width: 100% !important;
  }

  /* Aggressive mobile hardening for legacy desktop sections */
  [class*="row"],
  [class*="grid"],
  [class*="columns"],
  [class*="cards"],
  [class*="content"],
  [class*="detail"],
  [class*="panel"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  [class*="row"] > *,
  [class*="grid"] > *,
  [class*="columns"] > *,
  [class*="cards"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Improve scrolling and avoid accidental horizontal drift on phones */
  html,
  body {
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* Broad fallback for inline desktop paddings in old pages */
  [style*="padding-left"],
  [style*="padding-right"],
  [style*="margin-left"],
  [style*="margin-right"] {
    max-width: 100% !important;
  }

  /* Media-heavy work pages should stay readable */
  #photo-modal,
  #photoModal,
  #detail-modal,
  .photo-modal,
  .modal {
    padding: .65rem !important;
    align-items: center !important;
  }

  #photo-modal > div,
  #photoModal > div,
  #detail-modal > div,
  .photo-modal > div,
  .modal > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
  }
}

/* 2026 mobile polish: stronger cross-page behavior for OHS_APP_3_HTML */
@media (max-width: 1023px) {
  body.mobile-dashboard {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  body.mobile-dashboard #sidebar,
  body.mobile-dashboard #action-menu,
  body.mobile-dashboard #actionMenu,
  body.mobile-dashboard #file-list,
  body.mobile-dashboard #files-list {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  /* all_works / our_work content blocks */
  #entry-title {
    margin-top: .35rem;
    padding-left: .2rem;
    padding-right: .2rem;
  }

  #quick-links,
  .downloads {
    align-items: stretch;
  }

  #quick-links > button,
  .download-toggle,
  .download-options a,
  #prev-page,
  #next-page {
    min-height: 2.8rem;
    border-radius: .7rem !important;
  }

  .content-container .text-block {
    padding: .35rem .2rem;
  }

  .content-container .text-block p,
  .content-container .text-block li {
    font-size: .97rem;
  }

  /* contact/join/account dense blocks */
  .position-card,
  .contact-card,
  .upload-card,
  .stat-card,
  .profile-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* safer media ratios for tall phones */
  .hero-image,
  .work-image,
  #main-image,
  #small-image,
  .diagram-image {
    max-height: min(62dvh, 460px) !important;
  }

  /* prevent clipped popups/selectors */
  #lang-options,
  [id*="lang-options"],
  .download-options,
  [role="dialog"],
  .modal {
    max-width: min(100vw - 1rem, 100%);
  }
}

@media (max-width: 767px) {
  body {
    -webkit-tap-highlight-color: rgba(30, 58, 138, 0.2);
  }

  nav.mobile-nav-open {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  }

  nav.mobile-nav-open #nav-links {
    max-height: min(68dvh, 420px);
    padding-bottom: max(.35rem, env(safe-area-inset-bottom));
  }

  /* keep long translated labels readable */
  #quick-links button,
  .download-toggle,
  .download-options a,
  #nav-links a {
    hyphens: auto;
  }

  /* account/myfiles mobile cards */
  #file-list > *,
  #files-list > * {
    padding: .75rem !important;
  }

  /* avoid horizontal clipping from transformed elements */
  [class*="translate-x-"],
  [class*="-translate-x-"] {
    max-width: calc(100vw - 1rem);
  }
}

@media (max-width: 430px) {
  #entry-title,
  h1[data-i18n="allworks_title"] {
    font-size: clamp(1.5rem, 8.4vw, 1.95rem) !important;
  }

  .text-lg,
  p,
  li,
  label,
  input,
  select,
  textarea,
  button {
    font-size: .96rem !important;
  }

  #quick-links {
    gap: .5rem !important;
  }

  #quick-links > button,
  #prev-page,
  #next-page {
    padding: .55rem .65rem !important;
    font-size: .9rem;
  }

  .content-container,
  .download-section {
    padding: .7rem !important;
  }

  /* Extra narrow phones: keep nav chips readable and tappable */
  #nav-links li {
    flex: 1 1 100%;
    min-width: 0;
  }

  #nav-links a {
    min-height: 2.45rem;
  }
}

/* 2026 Q1: Global final-pass hardening for every HTML page in OHS_APP_3_HTML */
@media (max-width: 1023px) {
  :root {
    --mobile-content-max: 100%;
    --mobile-page-edge-gap: clamp(.55rem, 2.6vw, .95rem);
    --mobile-touch-size: 44px;
  }

  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  body > nav + *,
  body > main,
  body > section,
  body > article,
  body > div,
  main > *,
  section > * {
    width: 100%;
    max-width: var(--mobile-content-max);
    min-width: 0;
  }

  /* frequently used wrappers in the project */
  .content-container,
  .download-section,
  .photo-wrap,
  .photo-area,
  .text-block,
  .position-card,
  .profile-card,
  .upload-card,
  .stat-card,
  .contact-card,
  .manifesto,
  .manifesto-row,
  .position-list {
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* any legacy inline desktop width/positioning should collapse safely */
  [style*="width:"],
  [style*="min-width:"],
  [style*="max-width:"],
  [style*="left:"],
  [style*="right:"] {
    max-width: 100% !important;
  }

  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
    gap: .7rem;
  }

  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }

  /* safer typography for translated/long-content blocks */
  h1, h2, h3, h4,
  p, li, label, a, button {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* sticky/fixed overlays should not clip on tablets */
  .modal,
  [role="dialog"],
  #photo-modal,
  #photoModal,
  #detail-modal,
  #upload-modal,
  #preview-modal {
    max-width: 100vw;
  }

  .modal > div,
  [role="dialog"] > div,
  #photo-modal > div,
  #photoModal > div,
  #detail-modal > div,
  #upload-modal > div,
  #preview-modal > div {
    width: min(100%, 920px) !important;
    margin: 0 auto;
    max-height: 88dvh;
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  /* extra-strong one-column enforcement for phone layouts */
  .content-row,
  .mid-row,
  .diagram-row,
  .job-list,
  .process-wrap,
  .cards-grid,
  .timeline-grid,
  .circle-grid,
  .manifesto-row,
  #phones-container,
  #emails-container,
  #faxes-container,
  #locations-container,
  #service-cards,
  #domainList,
  #groupList,
  #stats-grid,
  #action-menu,
  #actionMenu,
  #file-list,
  #files-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  #domainListPanel {
    margin-top: .85rem !important;
  }

  /* keep navigation readable and finger-friendly */
  #nav-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem !important;
    padding: .35rem !important;
  }

  #nav-links li {
    min-width: 0;
    width: 100%;
  }

  #nav-links a,
  button,
  .download-toggle,
  .download-options a,
  #prev-page,
  #next-page {
    min-height: var(--mobile-touch-size, 44px) !important;
  }

  section,
  article,
  .container,
  .content-container {
    padding-left: var(--mobile-page-edge-gap, .75rem) !important;
    padding-right: var(--mobile-page-edge-gap, .75rem) !important;
  }

  /* keep images and diagram areas visible without horizontal drift */
  img,
  video,
  canvas,
  iframe,
  #main-image,
  #small-image,
  .diagram-image,
  .hero-image,
  .work-image {
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

@media (max-width: 520px) {
  #nav-links {
    grid-template-columns: 1fr !important;
  }

  h1,
  #entry-title,
  h1[data-i18n="allworks_title"] {
    font-size: clamp(1.35rem, 7.5vw, 1.8rem) !important;
    line-height: 1.25;
  }

  h2 {
    font-size: clamp(1.1rem, 5.8vw, 1.35rem) !important;
  }

  .content-container,
  .download-section,
  #detail-modal > div,
  #upload-modal > div,
  #preview-modal > div {
    padding: .7rem !important;
    border-radius: .75rem !important;
  }
}



/* Mobile smoothness additions (20260315) */
@media (max-width: 1023px) {
  /* Keep mobile menus within the viewport */
  nav.mobile-nav-open #nav-links,
  .mobile-nav-open #nav-links {
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }

  #nav-links {
    gap: .5rem;
  }

  #nav-links a {
    line-height: 1.2;
  }

  .site-header,
  .site-header nav,
  nav[aria-label="Main navigation"] {
    max-width: 100vw;
  }

  .nav-shell {
    padding-left: .9rem;
    padding-right: .9rem;
  }

  .brand,
  .brand-text {
    max-width: 70vw;
  }
}

@media (max-width: 767px) {
  /* Tighter headings to avoid overflow in DE/TR */
  h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(1.3rem, 5.6vw, 1.85rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.1rem, 4.8vw, 1.45rem);
  }

  #nav-links a {
    padding: .5rem .7rem !important;
  }

  .card,
  .panel,
  .content-card {
    border-radius: 14px;
  }
}


/* 2026-03-15: Mobile nav full-width + header button stacking */
@media (max-width: 1023px) {
  .nav-shell {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #nav-links {
    width: 100% !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  nav.mobile-nav-open #nav-links,
  .mobile-nav-open #nav-links {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  nav:not(.mobile-nav-open) #nav-links {
    display: none !important;
  }

  nav.mobile-nav-open #nav-links {
    display: flex !important;
    flex-direction: column !important;
  }

  .header_btn-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
    width: 100% !important;
  }

  .header_btn-grid .header_bg-img-item,
  .header_btn-grid .header_link-wrapper,
  .header_btn-grid .header_link {
    width: 100% !important;
  }

  .header_btn-grid .header_link-wrapper,
  .header_btn-grid .header_link {
    justify-content: center !important;
  }

  .header_btn-grid .text-header-link-18pt {
    text-align: center !important;
  }

  .header_bg-img-item,
  .header_bg-img-component,
  .header_bg-img-grid,
  .health_image-component,
  .health_big-image-absolute,
  .fintech_image-absolute,
  .fintech_image-line-wrapper,
  .health_image-line-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* 2026-03-15: Mobile nav alignment fixes (video_0217) */
@media (max-width: 1023px) {
  header .nav-shell,
  .site-header .nav-shell,
  nav .nav-shell {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  header .brand-cluster,
  .site-header .brand-cluster,
  nav .brand-cluster {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #nav-links {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
  }

  nav.mobile-nav-open #nav-links,
  .mobile-nav-open #nav-links {
    align-self: stretch !important;
  }
}

@media (max-width: 767px) {
  nav.mobile-nav-open #nav-links {
    width: 100% !important;
  }
}


/* 2026-03-15: Mobile nav overlay panel */
@media (max-width: 1023px) {
  #mobile-nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 65;
    padding: .6rem .9rem .9rem;
    display: none;
    background: rgba(219, 234, 254, 0.98);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    box-shadow: 0 14px 26px rgba(2, 6, 23, 0.16);
  }

  body.mobile-nav-panel-open #mobile-nav-panel,
  #mobile-nav-panel.is-open {
    display: block;
  }

  #mobile-nav-panel #nav-links {
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
  }
}


/* 2026-03-15: Mobile index/card refinement */
@media (max-width: 1023px) {
  .hero-highlights {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }

  .metric {
    width: 100% !important;
  }

  .metric-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem !important;
    justify-items: center;
  }

  .trust-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
  }

  .value-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .explain-context-grid {
    grid-template-columns: 1fr !important;
  }

  .human-loop {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .feature-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .9rem !important;
  }

  .feature-card {
    width: 100% !important;
  }

  .tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }

  .tag-list a {
    white-space: normal !important;
  }

  .flow-list {
    padding-left: 0 !important;
  }
}

@media (max-width: 520px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
  }

  .metric-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .3rem !important;
  }
}


/* 2026-03-15: Mobile nav overlay full-width fix */
@media (max-width: 1023px) {
  #mobile-nav-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--mobile-nav-offset, 72px) + env(safe-area-inset-top)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: .75rem 1rem 1rem !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.18) !important;
    max-height: calc(100dvh - var(--mobile-nav-offset, 72px) - 12px) !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }

  body.mobile-nav-panel-open #mobile-nav-panel {
    display: block !important;
  }

  body.mobile-nav-panel-open #nav-links,
  #mobile-nav-panel #nav-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #mobile-nav-panel #nav-links a {
    text-align: center !important;
  }
}


/* 2026-03-15: Mobile single-column safety */
@media (max-width: 1023px) {
  .hero-grid,
  .scenario-layout,
  .usecases-shell,
  .value-grid,
  .trust-wrap,
  .feature-grid,
  .section-grid,
  .cards-grid,
  .panel-grid,
  .service-grid,
  .analysis-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-grid,
  .scenario-layout,
  .usecases-shell,
  .value-grid,
  .trust-wrap {
    display: grid !important;
    gap: 1rem !important;
  }

  .hero-grid > *,
  .scenario-layout > *,
  .usecases-shell > *,
  .feature-grid > *,
  .value-grid > *,
  .trust-wrap > * {
    min-width: 0 !important;
  }

  .cta-row,
  .button-row,
  .action-row,
  .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* 2026-03-15: Mobile workspace sidebar overlay */
@media (max-width: 1023px) {
  body.sidebar-open {
    overflow: hidden;
  }

  #account-sidebar,
  #app-sidebar,
  #sidebar {
    top: calc(var(--mobile-nav-offset, 72px) + env(safe-area-inset-top)) !important;
    height: calc(100dvh - var(--mobile-nav-offset, 72px) - env(safe-area-inset-top)) !important;
    max-height: none !important;
  }

  body.sidebar-open #account-sidebar,
  body.sidebar-open #app-sidebar,
  body.sidebar-open #sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  #account-sidebar-overlay,
  #app-sidebar-overlay,
  #sidebar-overlay {
    inset: calc(var(--mobile-nav-offset, 72px) + env(safe-area-inset-top)) 0 0 0 !important;
  }
}


/* 2026-03-15: Mobile hero media safety */
@media (max-width: 1023px) {
  .button-image-gradient-wrapper,
  .button-image-grad-comonent,
  .button-image-gradient,
  .header_bg-img-wrapper-decktop,
  .header_bg-img-component,
  .header_bg-img-grid,
  .header_bg-img-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  .header_bg-img-item {
    height: auto !important;
  }
}


/* 2026-03-15: Mobile workspace sidebar overlay fill */
@media (max-width: 1023px) {
  body.sidebar-open #account-sidebar,
  body.sidebar-open #app-sidebar,
  body.sidebar-open #sidebar {
    transform: translateX(0) !important;
    z-index: 980 !important;
  }

  #account-sidebar-overlay,
  #app-sidebar-overlay,
  #sidebar-overlay {
    z-index: 970 !important;
  }
}


/* 2026-03-15: Mobile Auxility hero cleanup */
@media (max-width: 1023px) {
  .auxility-page .header_bg-img-wrapper-decktop {
    display: none !important;
  }

  .auxility-page .button-image-gradient-wrapper {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    width: 2.75em !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
  }

  .auxility-page .header_wrapper {
    gap: 1.1rem !important;
  }

  .auxility-page .header_heading-text-content {
    padding-top: 1rem !important;
  }

  .auxility-page .header_text-btn-component .button {
    width: 100% !important;
  }
}
/* Nav label integrity: avoid mid-word breaks on smaller screens */
@media (max-width: 1023px) {
  #nav-links a {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}


/* 2026-03-15: Mobile top nav polish */
@media (max-width: 1023px) {
  .site-header {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  .site-header nav {
    background: rgba(248, 251, 255, 0.96);
    border-bottom: 1px solid #dbe7ff;
    backdrop-filter: blur(10px);
  }

  .nav-shell {
    padding: .55rem .9rem .65rem;
    gap: .6rem;
  }

  .brand-cluster {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    width: 100% !important;
    gap: .5rem;
  }

  #nav-lang-selector {
    justify-self: start;
  }

  .brand {
    justify-self: center;
    text-align: center;
    font-size: 1.32rem;
    letter-spacing: 0.04em;
  }

  #nav-toggle {
    justify-self: end;
  }

  #lang-menu-toggle,
  .mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  #nav-lang-selector,
  #nav-toggle {
    align-self: center;
  }

  #nav-lang-selector #lang-options {
    top: calc(100% + 6px) !important;
  }

  #mobile-nav-panel {
    background: rgba(236, 245, 255, 0.98) !important;
  }

  #nav-links a {
    background: #eef5ff !important;
    border: 1px solid #d7e6ff !important;
    border-radius: 14px !important;
  }
}


/* 2026-03-15: Mobile metric alignment */
@media (max-width: 767px) {
  .hero-highlights {
    justify-items: center;
  }

  .metric {
    text-align: center;
    align-items: center;
  }

  .metric > * {
    margin-left: auto;
    margin-right: auto;
  }

  .metric-flow {
    justify-items: center;
    gap: .45rem;
  }

  .metric-step {
    min-height: 54px;
  }
}

/* Mobile: separate main categories and sub-categories */
@media (max-width: 767px) {
  #groupList {
    margin-bottom: 1rem !important;
    padding: .65rem !important;
    border: 1px solid #d7e6fb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 16px rgba(15, 41, 78, 0.08);
    gap: .55rem !important;
  }

  #domainList {
    margin-top: .75rem !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #c7dbf8 !important;
    background: #f2f7ff !important;
    box-shadow: 0 12px 22px rgba(15, 41, 78, 0.12);
    scroll-margin-top: calc(var(--mobile-nav-offset, 72px) + 16px);
  }

  .sector-pill {
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
    border-color: #bcd3f6 !important;
  }

  .domain-card {
    background: #ffffff !important;
    border-color: #c7dbf8 !important;
  }
}

/* 2026-03-15: Mobile trust symmetry */
@media (max-width: 767px) {
  .trust-item {
    text-align: center;
    align-items: center;
  }

  .trust-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .trust-kpi {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}


/* 2026-03-15: Mobile tooltip tap support */
@media (max-width: 1023px) {
  .metric-step.is-tip-open::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}


/* 2026-03-15: Mobile overlay blur safety */
@media (max-width: 1023px) {
  #account-sidebar-overlay,
  #app-sidebar-overlay,
  #sidebar-overlay {
    backdrop-filter: none !important;
  }
}


/* 2026-03-15: Mobile auxility hero layout */
@media (max-width: 1023px) {
  .auxility-page .header_bg-img-yellow-flex,
  .auxility-page .header_gradient-yellow-mob-wrapper {
    display: none !important;
  }

  .auxility-page .header_text-btn-component {
    align-items: stretch !important;
  }

  .auxility-page .header_btn-component,
  .auxility-page .button.yellow_pop-up {
    width: 100% !important;
  }
}

/* 2026-03-15: Auxility mobile header links cleanup */
@media (max-width: 767px) {
  .auxility-page .header_bg-img-wrapper-tablet-mob {
    position: static !important;
    padding: 0 1rem 1rem !important;
  }

  .auxility-page .header_bg-img-grid-tablet-mob {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    gap: .75rem !important;
  }

  .auxility-page .header_bg-img-yellow-tablet-mob,
  .auxility-page .header_gradient-yellow-mob-wrapper {
    display: none !important;
  }

  .auxility-page .header_link {
    min-height: 3.5rem !important;
    padding: .9rem 1rem !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 20px rgba(12, 24, 48, 0.18);
  }

  .auxility-page .header_link-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    width: 100% !important;
  }

  .auxility-page .text-header-link-18pt {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .auxility-page .header-button-arrow {
    width: 1rem !important;
    height: 1rem !important;
  }

  .auxility-page .button.yellow_pop-up {
    padding: 1rem 1.5rem !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
}

/* 2026-03-15: Auxility mobile cases cleanup */
@media (max-width: 767px) {
  .auxility-page .cases_ltem-tablet-mob {
    width: min(88vw, 22rem) !important;
    padding-right: 1rem !important;
  }

  .auxility-page .cases_card,
  .auxility-page .cases_last-card {
    height: auto !important;
    min-height: 18rem !important;
    padding-left: 0 !important;
  }

  .auxility-page .cases_content-and-bg-gradient {
    padding: 1.25rem !important;
    gap: .9rem !important;
  }

  .auxility-page .cases_image-absolute {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: .75rem !important;
    display: block !important;
  }

  .auxility-page .cases_image-wrapper,
  .auxility-page .cases_image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .auxility-page .cases_last-image-absolute {
    position: static !important;
    inset: auto !important;
    margin-top: .75rem !important;
  }

  .auxility-page .cases_last-image-wrapper {
    width: min(40vw, 7.5rem) !important;
    height: auto !important;
  }
}

/* 2026-03-15: Auxility mobile background trim */
@media (max-width: 767px) {
  .auxility-page .services-bg-blur_root {
    height: auto !important;
    margin: 1.5rem 0 !important;
  }

  .auxility-page .services-bg-blur_deck-adaptive {
    position: static !important;
    padding-top: 0 !important;
  }

  .auxility-page .services_bg-image-deck,
  .auxility-page .services_bg-image-tablet {
    display: none !important;
  }
}


/* 2026-03-15: Mobile metric flow row enforce */
@media (max-width: 767px) {
  .metric-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column;
  }

  .metric-step {
    width: 100% !important;
  }
}


/* 2026-03-15: Mobile auxility images sync */
@media (max-width: 1023px) {
  .auxility-page .cases_last-image-absolute,
  .auxility-page .header_heading-img-absolute,
  .auxility-page .header_heading-img-wrapper,
  .auxility-page .image-absolute,
  .auxility-page [class*='image-absolute'] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .auxility-page .cases_last-image-wrapper,
  .auxility-page .header_heading-img-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .auxility-page .image.fit-cover,
  .auxility-page .image.fit-contain,
  .auxility-page img.image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* 2026-03-15: Mobile language button reposition */
@media (max-width: 1023px) {
  #lang-menu-toggle {
    position: relative !important;
  }

  #lang-options {
    transform: none !important;
    margin: 0 !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15) !important;
  }

  #lang-options.lang-options-open {
    position: fixed !important;
  }
}


/* 2026-03-15: Mobile sidebar toggle above overlay */
@media (max-width: 1023px) {
  #account-sidebar-toggle,
  #app-sidebar-toggle,
  #sidebar-toggle {
    z-index: 990 !important;
  }
}


/* 2026-03-15: Mobile compact metric cards */
@media (max-width: 767px) {
  .metric {
    padding: .7rem .8rem !important;
    gap: .35rem !important;
  }

  .metric-flow {
    gap: .4rem !important;
  }

  .metric-step {
    min-height: 50px !important;
  }
}
/* 2026-03-15: Mobile header polish v2 */
@media (max-width: 1023px) {
  #lang-options.hidden {
    display: none !important;
  }

  .site-header .nav-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: .45rem .7rem !important;
    gap: .6rem !important;
  }

  .site-header .brand-cluster {
    width: 100% !important;
    justify-content: space-between !important;
    gap: .55rem !important;
  }

  .site-header .brand {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.4rem;
  }

  #nav-lang-selector {
    margin-right: 0 !important;
  }

  #lang-menu-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  #lang-menu-toggle img {
    width: 24px !important;
    height: 24px !important;
  }
}

/* 2026-03-15: Human loop compact + centered */
@media (max-width: 767px) {
  .value-card .human-loop {
    max-width: 340px;
    margin: 0 auto;
    gap: .5rem !important;
    justify-items: center !important;
  }

  .value-card .loop-node {
    min-height: 0 !important;
    padding: .55rem .65rem !important;
    justify-items: center !important;
    text-align: center;
  }

  .value-card .loop-figure {
    margin: 0 auto;
  }

  .value-card .loop-node small,
  .value-card .loop-node em {
    text-align: center;
  }
}

/* 2026-03-15: Keep metric icons in a row on small phones */
@media (max-width: 520px) {
  .metric-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .metric-step {
    min-height: 44px !important;
  }
}

/* 2026-03-15: Account sidebar overlay above blur */
@media (max-width: 1023px) {
  #account-sidebar {
    z-index: 1100 !important;
  }

  body.sidebar-open #account-sidebar {
    left: 0 !important;
    right: auto !important;
    z-index: 1100 !important;
  }

  #account-sidebar-overlay {
    z-index: 1090 !important;
    backdrop-filter: none !important;
  }
}

/* 2026-03-15: Mobile language dropdown hard-hide */
@media (max-width: 1023px) {
  #lang-options {
    display: none !important;
  }

  #lang-options.lang-options-open {
    display: grid !important;
  }
}

/* 2026-03-15: Account sidebar mobile priority */
@media (max-width: 1023px) {
  .account-redesign #account-sidebar {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: min(86vw, 340px) !important;
    transform: translateX(-105%) !important;
    z-index: 1100 !important;
  }

  .account-redesign.sidebar-open #account-sidebar {
    transform: translateX(0) !important;
  }
}

/* 2026-03-15: Human loop compact center override */
@media (max-width: 767px) {
  .value-card .human-loop {
    max-width: 320px;
    margin: 0 auto;
  }

  .value-card .loop-node {
    align-items: center !important;
  }
}

/* 2026-03-15: Mobile header + language menu final polish */
@media (max-width: 1023px) {
  .site-header nav {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  }

  .site-header .nav-shell {
    width: calc(100% - 1.4rem) !important;
  }

  #nav-lang-selector {
    position: relative !important;
    z-index: 1002 !important;
  }

  #lang-options {
    display: none !important;
    pointer-events: none !important;
  }

  #lang-options.lang-options-open {
    display: grid !important;
    pointer-events: auto !important;
  }
}

/* 2026-03-15: Mobile language dropdown width + alignment fix */
@media (max-width: 1023px) {
  #nav-lang-selector {
    overflow: visible !important;
  }

  #nav-lang-selector #lang-options {
    max-width: min(240px, calc(100vw - 24px)) !important;
    width: 176px !important;
    min-width: 168px !important;
    z-index: 1200 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #nav-lang-selector #lang-options button {
    width: 100% !important;
    height: 34px !important;
  }
}

/* 2026-03-15: Mobile nav panel readability */
@media (max-width: 1023px) {
  #mobile-nav-panel {
    border: 1px solid #d7e6ff !important;
    background: rgba(238, 245, 255, 0.98) !important;
  }

  #mobile-nav-panel #nav-links {
    gap: .6rem !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    scroll-snap-type: none !important;
  }

  #mobile-nav-panel #nav-links a {
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    width: 100% !important;
  }

  #mobile-nav-panel #nav-links li {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 2026-03-15: Mobile metric flow always 3 across */
@media (max-width: 767px) {
  .hero-highlights .metric-flow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: .35rem !important;
    justify-items: center !important;
  }

  .hero-highlights .metric-step {
    min-height: 46px !important;
  }
}

/* 2026-03-15: Human loop spacing compact */
@media (max-width: 767px) {
  .value-card .human-loop {
    grid-auto-rows: min-content !important;
    gap: .5rem !important;
  }

  .value-card .loop-node {
    width: 100% !important;
  }
}

/* 2026-03-15: Account sidebar mobile placement */
@media (max-width: 1023px) {
  .account-redesign #account-sidebar {
    top: calc(var(--mobile-nav-offset, 64px) + env(safe-area-inset-top)) !important;
    height: calc(100dvh - var(--mobile-nav-offset, 64px) - env(safe-area-inset-top)) !important;
    box-shadow: 0 20px 40px rgba(8, 18, 40, 0.18) !important;
  }

  .account-redesign #account-sidebar-overlay {
    background: rgba(10, 20, 40, 0.25) !important;
  }
}

/* 2026-03-15: Auxility hero imagery alignment on mobile */
@media (max-width: 1023px) {
  .auxility-page .button-image-gradient-wrapper {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    width: 2.75em !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
  }

  .auxility-page .button-image-grad-comonent {
    width: 10rem !important;
    height: 10rem !important;
  }

  .auxility-page .button-image-gradient {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

/* 2026-03-17: Our Works mobile button sizing + overlap fixes */
@media (max-width: 767px) {
  body.body .section_direction-fintech .button,
  body.body .section_direction-health .button,
  body.body .section_services .button,
  body.body .services_research-component .button {
    padding: 0.85rem 1.35rem !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    border-radius: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
  }

  body.body .section_direction-fintech .button-image-gradient-wrapper,
  body.body .section_direction-health .button-image-gradient-wrapper,
  body.body .section_services .button-image-gradient-wrapper {
    display: none !important;
  }

  body.body .auxility-page a.button.yellow_pop-up,
  body.body .auxility-page a.button.is-services_research-btn,
  body.body a.button.is-purpure.fintech_btn,
  body.body a.button.is-green.w-inline-block {
    width: min(92vw, 320px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1rem 1.2rem !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body.body .auxility-page a.button.yellow_pop-up .button-image-gradient-wrapper,
  body.body .auxility-page a.button.is-services_research-btn .button-image-gradient-wrapper,
  body.body a.button.is-purpure.fintech_btn .button-image-gradient-wrapper,
  body.body a.button.is-green.w-inline-block .button-image-gradient-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body.body .auxility-page a.button.yellow_pop-up .button-text-arrow-component,
  body.body .auxility-page a.button.is-services_research-btn .button-text-arrow-component,
  body.body a.button.is-purpure.fintech_btn .button-text-arrow-component,
  body.body a.button.is-green.w-inline-block .button-text-arrow-component {
    position: relative !important;
    z-index: 1 !important;
  }

  body.body .button-text-arrow-component {
    grid-column-gap: .5rem !important;
    grid-row-gap: .5rem !important;
  }

  body.body .section_direction-fintech .fintech_image-absolute,
  body.body .section_direction-fintech .fintech_image-wrappers,
  body.body .section_direction-health .health_image-absolute,
  body.body .section_direction-health .health_big-image-absolute,
  body.body .section_direction-health .health_image-wrappers {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem auto 0 !important;
  }

  body.body .section_direction-fintech .fintech_image-absolute img,
  body.body .section_direction-health .health_image-absolute img,
  body.body .section_direction-health .health_big-image-absolute img,
  body.body .section_direction-health .health_image-wrappers img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* 2026-03-24: TerraYield mobile icon relocation */
@keyframes terrayieldMobileFloat {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

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

@media (max-width: 767px) {
  body.body .section_direction-fintech .health_image-absolute {
    display: none !important;
  }

  body.body .section_terrayield-copy.teryx-section .teryx-root {
    padding-top: clamp(6rem, 22vw, 7rem) !important;
  }

  body.body .section_terrayield-copy.teryx-section .teryx-grid {
    position: relative !important;
  }

  body.body .section_terrayield-copy.teryx-section .teryx-grid::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: clamp(7rem, 30vw, 8.75rem) !important;
    height: clamp(7rem, 30vw, 8.75rem) !important;
    transform: translateX(-50%) translateY(0) !important;
    background: url("../mode-reference/Auxility_files/terrayield-model.png")
      center / contain no-repeat !important;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.28)) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: terrayieldMobileFloat 4.8s ease-in-out infinite !important;
  }
}

/* 2026-03-24: Our Works OHS intro paragraph mobile alignment */
@media (max-width: 767px) {
  body.body #whyus .header_heading-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  body.body #whyus .direction_heading-component,
  body.body #whyus .grid_text-component.position-relative {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.body #whyus .grid_text-component.position-relative {
    justify-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.body #whyus .grid_text-component.position-relative .text-size-24pt {
    margin: 0 !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    text-indent: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.body #whyus .direction_circle-absolute {
    display: none !important;
  }
}

/* 2026-03-24: Our Works OHS media/text overlap fix on mobile */
@media (max-width: 767px) {
  body.body .section_direction-fintech .fintech_component {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  body.body .section_direction-fintech .fintech_text-btn-component {
    margin-bottom: 0.6rem !important;
  }

  body.body .section_direction-fintech .fintech_img-btn-component {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.75rem auto 0 !important;
    clear: both !important;
  }

  body.body .section_direction-fintech .fintech_grid-item,
  body.body .section_direction-fintech .fintech_grid-item.secondary-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.body .section_direction-fintech .fintech_grid-item.secondary-item {
    order: 2 !important;
  }

  body.body .section_direction-fintech .fintech_img-wrapper {
    position: static !important;
    width: min(78vw, 320px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    float: none !important;
  }

  body.body .section_direction-fintech .fintech_img-wrapper .fintech_image {
    width: 100% !important;
    height: auto !important;
  }

  body.body .section_direction-fintech .fintech_text-link-component,
  body.body .section_direction-fintech .fintech_text-image-component,
  body.body .section_direction-fintech .fintech_text-component {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
}

/* 2026-03-24: Our Works mobile OHS/Terra quick links wider without overlap */
@media (max-width: 767px) {
  body.body.auxility-page .header_bg-img-grid-tablet-mob {
    justify-items: center !important;
    gap: 0.95rem !important;
    padding-inline: 0.35rem !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .header_link {
    width: min(94vw, 33rem) !important;
    max-width: 100% !important;
    min-height: clamp(4.6rem, 17vw, 5.6rem) !important;
    padding: 1rem 1.2rem 1rem 1.35rem !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.8rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .header_link-wrapper {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .button-text-arrow-component {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .text-header-link-18pt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: clamp(1.08rem, 4.7vw, 1.36rem) !important;
    line-height: 1.18 !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .header_link-image-wrapper {
    flex: 0 0 clamp(4.35rem, 18vw, 5.7rem) !important;
    width: clamp(4.35rem, 18vw, 5.7rem) !important;
    height: clamp(4.35rem, 18vw, 5.7rem) !important;
    margin-left: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    pointer-events: none !important;
  }

  body.body.auxility-page .header_bg-img-grid-tablet-mob .header_link-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* 2026-03-17: Our Works OHS/Terra mobile deck sizing */
@media (max-width: 720px) {
  .works-deck-shell {
    margin-right: 0 !important;
    padding-inline: 0.85rem !important;
  }

  .works-grid {
    grid-template-columns: 1fr !important;
  }

  .work-stage-card,
  .work-stage-card--wide {
    grid-column: span 1 !important;
    min-height: auto !important;
  }
}

/* 2026-03-24: Our Works ellipsus mobile cleanup */
@media (max-width: 720px) {
  body.our-works-dark #ellipsus-addon-block {
    width: calc(100% - 1rem) !important;
    margin: 0 auto 1.5rem !important;
    padding: 0.8rem !important;
    border-radius: 22px !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-addon-head p {
    margin-bottom: 0.7rem !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-addon-stage {
    min-height: auto !important;
    padding: 0.75rem 0.75rem 0.95rem !important;
    border-radius: 18px !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-lanes {
    display: block !important;
    min-height: 0 !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-side-preview {
    display: none !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-main-preview {
    min-height: auto !important;
    padding: 0.7rem !important;
    gap: 0.6rem !important;
    border-radius: 16px !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-main-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.3rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-main-meta strong,
  body.our-works-dark #ellipsus-addon-block .ellipsus-main-meta span,
  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb strong,
  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb small {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-main-figure {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    padding: 0.25rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-main-figure img {
    object-fit: contain !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-floating-note {
    display: none !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-stage-nav {
    width: 42px !important;
    height: 42px !important;
    top: clamp(5.1rem, 22vw, 6.8rem) !important;
    transform: none !important;
    background: rgba(7, 23, 41, 0.68) !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-stage-nav--prev {
    left: 0.35rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-stage-nav--next {
    right: 0.35rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.75rem !important;
    margin-top: 0.85rem !important;
    padding: 0 0 0.25rem !important;
    scroll-snap-type: x proximity !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb {
    flex: 0 0 min(80vw, 280px) !important;
    min-height: 0 !important;
    padding: 0.6rem !important;
    scroll-snap-align: start !important;
    transform: none !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb img {
    height: 104px !important;
    object-fit: contain !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb strong {
    font-size: 0.95rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-thumb small {
    font-size: 0.78rem !important;
  }

  body.our-works-dark #ellipsus-addon-block .ellipsus-addon-caption {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }
}

/* 2026-03-17: Mobile language menu show all 3 flags */
@media (max-width: 767px) {
  #nav-lang-selector #lang-options {
    width: 184px !important;
    min-width: 176px !important;
    grid-template-columns: repeat(3, minmax(44px, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  #nav-lang-selector #lang-options [data-lang="tr"] {
    display: inline-flex !important;
  }

  #nav-lang-selector #lang-options button {
    width: 44px !important;
    height: 32px !important;
    border-color: rgba(170, 186, 214, 0.6) !important;
  }
}

/* 2026-03-17: Mobile language menu avoid clipping */
@media (max-width: 767px) {
  .site-header nav,
  .site-header .nav-shell,
  .site-header .brand-cluster,
  #nav-lang-selector {
    overflow: visible !important;
  }

  #nav-lang-selector #lang-options {
    left: 0 !important;
    right: auto !important;
  }

  #nav-lang-selector #lang-options.lang-options-open {
    position: absolute !important;
  }
}

/* 2026-03-17: Mobile portrait language menu hard override (show all 3 flags) */
@media (max-width: 600px) {
  #nav-lang-selector #lang-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    padding: 8px !important;
    width: 186px !important;
    min-width: 186px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #nav-lang-selector #lang-options.hidden {
    display: none !important;
  }

  #nav-lang-selector #lang-options.lang-options-open {
    display: grid !important;
  }

  #nav-lang-selector #lang-options button {
    width: 44px !important;
    height: 32px !important;
  }
}

/* 2026-03-17: Our Works decks show single active card on phones */
@media (max-width: 720px) {
  .works-grid {
    grid-template-columns: 1fr !important;
  }

  .works-grid .work-stage-card {
    display: none !important;
  }

  .works-grid .work-stage-card.is-active {
    display: flex !important;
  }
}