/* ============================================
   ERGONOMICS ENGINEERED - MOBILE & TABLET STYLES
   Affects screens 1040px and below
   ============================================ */

@media (max-width: 1040px) {

  /* ----- BODY/HTML BACKGROUND FALLBACK ----- */
  body, html {
    background-color: #0a1628;
  }

  /* ----- MOBILE MENU BAR - BLACK WITH WHITE HAMBURGER ----- */
  .grax_tm_mobile_menu .topbar_inner {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .my_trigger .hamburger-inner,
  .my_trigger .hamburger-inner::before,
  .my_trigger .hamburger-inner::after {
    background-color: #fff !important;
  }

  /* Mobile menu logo - make it bigger */
  .grax_tm_mobile_menu .logo img {
    max-width: 130px !important;
  }

  /* Mobile dropdown menu */
  .grax_tm_mobile_menu .dropdown {
    background-color: #0a1628 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
    color: #fff !important;
  }

  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:hover,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a:active,
  .grax_tm_mobile_menu .dropdown .dropdown_inner ul li.current a {
    color: #00d4ff !important;
  }

  /* ----- FORCE FULL WIDTH ON ALL CONTAINERS ----- */
  .grax_tm_all_wrap,
  .grax_tm_hero,
  .grax_tm_hero > * {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* But keep some padding on text content */
  .grax_tm_hero .details {
    padding-left: 20px !important;
    padding-right: 20px !important;
    top: calc(8% - 15px) !important;
    transform: translateY(0) !important;
  }

  /* Hide taglines on mobile */
  .grax_tm_hero .details .tagline {
    display: none !important;
  }

  /* ----- HERO SECTION ----- */

  /* Allow line breaks in brand prefix */
  .grax_tm_hero .details .brand_prefix {
    white-space: normal !important;
    display: block !important;
    text-align: left !important;
  }

  .grax_tm_hero {
    min-height: 100vh;
    overflow: hidden;
  }

  .grax_tm_hero .ripple {
    background-image: url('../img/slider/ergosphere-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Ensure background covers fully */
  .grax_tm_hero .background,
  .grax_tm_hero .image {
    width: 100%;
    background-size: cover;
    background-position: center center;
  }

  /* ----- ERGOSPHERE SECTION (01) ----- */

  #ergosphere .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #ergosphere .about_inner {
    display: block !important;
  }

  #ergosphere .grax_tm_about .left,
  #ergosphere .grax_tm_about .right {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ergosphere .grax_tm_about .left {
    width: 75% !important;
    margin: 0 auto 30px auto;
  }

  #ergosphere .grax_tm_about .left .image {
    max-height: 280px;
  }

  /* Center the button and add space before carousel */
  #ergosphere .grax_tm_button {
    text-align: center;
    margin-bottom: 40px;
  }

  /* Remove carousel bottom margins on mobile to match Journey section */
  #ergosphere .ergosphere_gallery {
    margin-bottom: 0 !important;
  }

  /* ----- ERGOBYTES SECTION (02) ----- */

  /* Put image at top, reduce gaps */
  #ergobytes .ergobytes_top {
    flex-direction: column-reverse !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  /* Size and center the logo */
  #ergobytes .ergobytes_logo {
    width: 60% !important;
    max-width: 250px;
    margin: 0 auto !important;
  }

  /* Reduce space after description */
  #ergobytes .ergobytes_description {
    margin-bottom: 20px !important;
  }

  /* Center the YouTube button */
  #ergobytes .ergobytes_cta {
    text-align: center;
  }

  /* Episodes carousel - mobile size adjustments */
  #ergobytes .episode_card {
    width: 200px;
  }

  #ergobytes .episode_image {
    height: 113px;
  }

  #ergobytes .ergobytes_episodes {
    margin-bottom: 0 !important;
  }

  /* Match section spacing to other sections */
  #ergobytes .grax_tm_news {
    padding-bottom: 65px !important;
  }

  /* ----- JOURNEY SECTION (03) ----- */

  /* Match section 01/02 spacing */
  #journey .grax_tm_journey {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #journey .journey_top {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #journey .journey_portrait {
    margin-top: 0 !important;
    width: 75% !important;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- CONTACT SECTION ----- */

  #contact.grax_tm_contact {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
    margin-bottom: 0 !important;
  }

  /* Center the title */
  #contact .grax_tm_title_holder {
    text-align: center;
  }

  #contact .contact_inner {
    padding-top: 30px !important;
  }

  /* Hide text labels, show only icons */
  #contact .info_list ul {
    display: flex !important;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #contact .info_list ul li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
  }

  #contact .info_list .list_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
  }

  /* Hide the text */
  #contact .info_list .list_inner p {
    display: none !important;
  }

  /* Circle container on the anchor */
  #contact .info_list .list_inner > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  #contact .info_list .list_inner > a:hover {
    border-color: #00d4ff;
  }

  /* Style the icon inside */
  #contact .info_list .list_inner img.svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 0 !important;
    filter: brightness(0) invert(1);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide Location, show YouTube on mobile */
  #contact .info_list ul li.location-item {
    display: none !important;
  }

  #contact .info_list ul li.youtube-item {
    display: block !important;
  }

  /* ----- FOOTER/COPYRIGHT ----- */

  /* Force footer elements visible - fixes WOW.js not triggering on mobile */
  .grax_tm_copyright .wow {
    visibility: visible !important;
    animation: none !important;
  }

  .grax_tm_copyright {
    padding: 40px 0 30px 0 !important;
    margin-bottom: 0 !important;
  }

  /* Exclude footer from general section rules */
  .grax_tm_section > .grax_tm_copyright {
    padding-top: 40px !important;
    margin-bottom: 0 !important;
  }

  /* Hide social icons in footer (now in contact section) */
  .grax_tm_copyright .social {
    display: none !important;
  }

  /* Logo size and center */
  .grax_tm_copyright .logo {
    text-align: center;
    width: 100%;
  }

  .grax_tm_copyright .logo img,
  .ee_footer .logo img {
    max-width: 450px !important;
    width: 75% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ----- GENERAL FIXES ----- */

  /* Base section spacing on tablet */
  .grax_tm_about,
  .grax_tm_section > div {
    padding-top: 40px !important;
    margin-bottom: 40px !important;
  }

  /* ----- TABLET SECTION HEADER/FOOTER SPACING ----- */
  #product,
  #capabilities,
  #community {
    padding-top: 40px !important;
  }

  #product .pillars_grid {
    margin-bottom: 40px !important;
  }

  #capabilities .capability_blocks {
    margin-bottom: 40px !important;
  }

  #community .community_panels {
    margin-bottom: 40px !important;
  }

  .grax_tm_section.footer_section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Footer logos - tablet */
  .footer_logos {
    gap: 60px !important;
    margin-bottom: 25px !important;
  }

  .footer_logo_left img {
    max-height: 50px !important;
  }

  .footer_logo_right img {
    max-height: 80px !important;
  }

  /* Fix all overflow elements */

  /* Modal - hide or constrain */
  .grax_tm_modalbox_news,
  .grax_tm_modalbox_news .box_inner,
  .grax_tm_modalbox_news .description_wrap {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Animated galleries - keep overflow hidden */
  .ergosphere_gallery,
  .awards_gallery {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .gallery_scroll,
  .awards_scroll {
    max-width: none !important;
    width: max-content !important;
  }

  /* Contact section */
  .grax_tm_contact,
  .grax_tm_contact .container,
  .contact_inner,
  .contact_simple,
  .contact_info {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Global container fix */
  .container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: hidden !important;
  }

  /* Main wrapper */
  .grax_tm_all_wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

}

@media (max-width: 768px) {

  /* ----- MOBILE-ONLY HERO BACKGROUND ----- */
  .grax_tm_hero .ripple {
    background-image: url('../img/slider/ergosphere-hero.png');
    background-position: top center;
  }

  /* ----- HERO BUTTONS - STACK & REDUCE SIZE ----- */
  .grax_tm_hero .buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 60px !important;
  }

  .grax_tm_hero .buttons .grax_tm_button {
    margin-left: 0 !important;
    width: auto !important;
  }

  .grax_tm_hero .buttons .grax_tm_button a {
    padding: 8px 25px !important;
  }

  /* Request Access button - outlined/inverted style */
  .grax_tm_hero .buttons .grax_tm_button:last-child a {
    background: transparent !important;
    color: #00d4ff !important;
    border: 1px solid #00d4ff !important;
  }

  .grax_tm_hero .buttons .grax_tm_button:last-child a:hover {
    background: #00d4ff !important;
    color: #0a1628 !important;
  }

  /* ----- SECTION TOP GAPS (MOBILE) ----- */
  #product {
    padding-top: 0 !important;
  }

  #capabilities,
  #community {
    padding-top: 0 !important;
  }

  /* ----- SECTION SUBHEAD - REDUCE BOTTOM PADDING ----- */
  .section_subhead {
    padding-bottom: 30px !important;
  }

  /* ----- REDUCE SECTION GAPS (MOBILE ONLY) ----- */

  /* Base section spacing - reduced by half */
  .grax_tm_about,
  .grax_tm_section > div {
    padding-top: 40px !important;
    margin-bottom: 40px !important;
  }

  /* Section intro - reduce margins */
  .section_intro {
    margin: 15px auto 25px auto !important;
  }

  /* Section 01 (#product) - reduce bottom margin */
  #product .pillars_grid {
    margin-bottom: 30px !important;
  }

  /* Section 02 (#capabilities) - reduce top and bottom margins */
  #capabilities .capability_blocks {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }

  /* Fix: Last capability block should have no bottom padding on mobile */
  .capability_block:last-child {
    padding-bottom: 0 !important;
  }

  /* Section 03 (#community) - reduce margins */
  #community .community_panels {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }

  /* Footer section - reduce padding */
  .grax_tm_section.footer_section {
    padding-top: 17px !important;
    padding-bottom: 25px !important;
  }

  /* Footer logos - mobile */
  .footer_logos {
    gap: 40px !important;
    margin-bottom: 20px !important;
  }

  .footer_logo_left img {
    max-height: 35px !important;
  }

  .footer_logo_right img {
    max-height: 55px !important;
  }

  /* Footer links - mobile */
  .footer_links {
    margin-bottom: 15px !important;
    gap: 12px !important;
  }

  .footer_links a {
    font-size: 12px !important;
  }

  .footer_divider {
    font-size: 12px !important;
  }

  /* Footer copyright - mobile */
  .footer_copyright p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

}

@media (max-width: 480px) {

  /* ----- SMALL MOBILE TWEAKS ----- */

  /* Scale down the main title */
  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2.5rem !important;
    word-break: keep-all;
    white-space: normal;
  }

  /* Footer - small screens */
  .footer_logos {
    gap: 25px !important;
  }

  .footer_logo_left img {
    max-height: 28px !important;
  }

  .footer_logo_right img {
    max-height: 44px !important;
  }

  .footer_links {
    gap: 8px !important;
  }

  .footer_links a,
  .footer_divider {
    font-size: 11px !important;
  }

}

@media (max-width: 360px) {

  /* ----- EXTRA SMALL MOBILE ----- */

  .grax_tm_hero .brand_name,
  .grax_tm_hero .name {
    font-size: 2rem !important;
  }

}