/* ==========================================================================
   Mobile refinement layer — loaded on every page.
   Only affects screens <= 991px; desktop layout stays untouched.
   ========================================================================== */

@media (max-width: 991px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  .auto-container,
  .container,
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---------- Header / logos ---------- */
  .headerboxn0 .headertoprow {
    flex-wrap: wrap;
    gap: 8px;
  }
  .brand-logos {
    display: flex !important;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 110px);
  }
  .brand-logo {
    height: auto !important;
    max-height: 34px !important;
    width: auto !important;
    object-fit: contain;
  }
  .brand-logo--exy {
    max-height: 30px !important;
  }
  .brand-logo-divider {
    display: none !important;
  }
  .logoboxn0 img {
    max-height: 34px;
    width: auto;
  }

  /* ---------- Hero ---------- */
  .bannersection0,
  .herosection0,
  .mainbanner0 {
    min-height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 32px !important;
  }
  .bannersection0 h1,
  .herosection0 h1,
  h1 {
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.12 !important;
    word-break: break-word;
  }
  h2 {
    font-size: clamp(22px, 6.4vw, 32px) !important;
    line-height: 1.18 !important;
  }
  h3 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }
  .word-rotator,
  .word-rotator__track {
    max-width: 100%;
    overflow: hidden;
  }

  /* ---------- Buttons ---------- */
  .headerBtn,
  .bannerbtnbox0,
  .btnbox0,
  .herobtns0 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .redbutton01,
  .whitecirclebtn,
  .greenbtn {
    font-size: 13px !important;
    padding: 10px 16px !important;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ---------- Grids collapse ---------- */
  .row > [class*="col-"] {
    margin-bottom: 14px;
  }

  /* ---------- Tables become swipeable ---------- */
  .exTableWrap,
  .table-responsive,
  .tablebox0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.exTable,
  .admTable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }

  /* ---------- Marquee / carousels ---------- */
  .exy-marquee,
  .marqueebox0 {
    overflow: hidden;
  }
  .exy-marquee-item {
    font-size: 13px !important;
  }

  /* ---------- Forms ---------- */
  input,
  select,
  textarea {
    font-size: 16px !important; /* stops iOS zoom-on-focus */
    max-width: 100%;
  }
  form .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ---------- Sections spacing ---------- */
  section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* ---------- Footer ---------- */
  footer .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
  }

  /* ---------- Editorial pages (about / awards / news / certs) ---------- */
  .ab-hero,
  .ct-hero,
  .nw-hero,
  .cert-hero,
  .aw-hero {
    padding: 90px 16px 36px !important;
  }
  .ab-grid,
  .ct-grid,
  .nw-grid,
  .cert-grid,
  .aw-grid,
  .mh-grid,
  .ab-split,
  .aw-show {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .aw-show-main,
  .aw-show-medal,
  .aw-show-body {
    max-width: 100% !important;
  }

  /* ---------- Admin panel ---------- */
  .admWrap,
  .admShell {
    padding: 12px !important;
  }
  .admToolbar,
  .admActions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admCard,
  .admPanel {
    width: 100% !important;
  }
}

@media (max-width: 575px) {
  .brand-logo {
    max-height: 28px !important;
  }
  .brand-logo--exy {
    max-height: 26px !important;
  }
  .redbutton01 .arrowicon0 {
    display: none !important;
  }
  .exy-marquee-item {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   Home hero — desktop uses an aspect-ratio canvas with absolutely positioned
   text. On phones/tablets we flatten it into a normal stacked block.
   ========================================================================== */
@media (max-width: 991px) {
  html body .heroSemantic0 {
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    padding: 104px 18px 26px !important;
    display: block !important;
    background: linear-gradient(160deg, #06013c 0%, #0b1c69 55%, #140f36 100%) !important;
  }
  html body .heroSemantic0 .heroImg0,
  html body .heroSemantic0 .heroBgVideo0 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 70% center !important;
    opacity: 0.4;
  }
  html body .heroSemantic0 .heroTextLayer0 {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
  html body .heroSemantic0 .heroTextLayer0::before {
    display: none !important;
  }
  html body .heroSemantic0 .heroCopy0 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  html body .heroSemantic0 .heroSearchWrap0,
  html body .heroSemantic0 .heroEyebrow0,
  html body .heroSemantic0 h1.heroTitle0,
  html body .heroSemantic0 .heroRule0,
  html body .heroSemantic0 p.heroLead0 {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body .heroSemantic0 .heroSearchWrap0 {
    order: 1;
  }
  html body .heroSemantic0 .heroEyebrow0 {
    order: 2;
    height: auto !important;
    padding: 7px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    width: auto !important;
  }
  html body .heroSemantic0 h1.heroTitle0 {
    order: 3;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }
  html body .heroSemantic0 h1.heroTitle0 span {
    position: static !important;
    left: auto !important;
    top: auto !important;
    white-space: normal !important;
    display: block !important;
  }
  html body .heroSemantic0 .hl1 {
    font-size: clamp(22px, 7vw, 34px) !important;
  }
  html body .heroSemantic0 .hl2 {
    font-size: clamp(26px, 9vw, 42px) !important;
  }
  html body .heroSemantic0 .hl3,
  html body .heroSemantic0 .hl4 {
    font-size: clamp(22px, 7.4vw, 36px) !important;
  }
  html body .heroSemantic0 .heroRule0 {
    order: 4;
    width: 96px !important;
    height: 2px !important;
  }
  html body .heroSemantic0 p.heroLead0 {
    order: 5;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  html body .heroSemantic0 .heroSearch0 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    padding: 6px 6px 6px 14px !important;
    gap: 8px !important;
  }
  html body .heroSemantic0 .heroSearch0 svg {
    width: 18px !important;
    height: 18px !important;
  }
  html body .heroSemantic0 .heroSearch0 input {
    font-size: 15px !important;
  }
  html body .heroSemantic0 .heroSearch0 button {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }
  html body .heroSemantic0 > .auto-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }
  html body .heroSemantic0 .headerBtn {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  html body .heroSemantic0 .headerBtn > a {
    flex: 1 1 45%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 575px) {
  html body .word-rotator,
  html body .word-rotator__word {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }
}