/* Public-site mobile/tablet overrides. Desktop styles remain in their existing files. */
@media (max-width: 1023px) {
  body { margin: 12px; }
  .animate__animated { animation: none !important; }
  header *, main *, footer *, header, main, footer { box-sizing: border-box; min-width: 0; }
  main, footer { overflow-wrap: anywhere; }
  main img { max-width: 100%; }
  main p { line-height: 1.75; }
  :is(a, button, summary, input, textarea):focus-visible { outline: 2px solid #9b5263 !important; outline-offset: 3px !important; }

  .translation-bar { top: 0px; min-height: 28px; font-size: 10px; }
  .translation-bar__inner { min-height: 28px; gap: 2px; padding: 0 4px 0 8px; }
  .translation-bar__label { display: none; }
  .translation-bar__item { min-height: 22px; padding: 0 5px; gap: 3px; }
  .translation-bar__flag { font-size: 11px; }

  .site-header { width: calc(100% - 24px); margin: 36px 12px 12px; padding: 8px; border-radius: 28px; flex-wrap: wrap; gap: 8px; z-index: 100; }
  .site-header .logo { padding-left: 8px; margin-right: auto; }
  .site-header .logo img { display: block; height: 36px; width: auto; }
  .site-header > .get-touch { order: 1; }
  .site-header .get-touch .get-offer { min-height: 44px; padding-left: 14px; gap: 8px; font-size: 12px; }
  .site-header .get-touch .get-offer .up-right { flex: none; }
  .site-header .mobile-menu-toggle:not([hidden]) { display: flex; order: 2; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: #4a0f1b; color: #fff; cursor: pointer; font-size: 22px; }
  .site-header .main-nav { order: 3; width: 100%; height: auto; padding: 12px; background: #161d2a; border-radius: 20px; }
  .site-header.mobile-ready .main-nav { position: absolute; top: calc(100% + 8px); left: 0; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .site-header.mobile-ready:not(.menu-open) .main-nav { display: none; }
  .site-header .main-nav .nav-list { display: block; height: auto; }
  .site-header .main-nav .nav-list > li { display: block; }
  .site-header .main-nav .nav-list a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; line-height: 1.5; color: #fff; white-space: normal; }
  .site-header .main-nav .nav-list a.active { background: #4a0f1b; border-radius: 10px; }
  .site-header .main-nav .nav-list > li > a:is(.active, :hover), .site-header .dropdown li a:hover { color: #fff; }
  .site-header .dropdown { position: static; min-width: 0; margin: 0 0 0 12px; padding: 0 0 0 8px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; border: 0; border-left: 1px solid #68727f; border-radius: 0; background: transparent; backdrop-filter: none; }
  .site-header .has-dropdown-right a span { display: none; }

  main.homepage .slide { height: auto; min-height: 580px; align-items: stretch; }
  main.homepage .slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
  main.homepage .slide > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
  main.homepage .slide > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
  main.homepage .slide-overlay { position: relative; width: 100%; bottom: auto; padding: 145px 24px 65px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px; }
  main.homepage .slide-overlay .context { font-size: clamp(30px, 5.5vw, 44px); line-height: 1.35; }
  main.homepage .slide-overlay .cta { width: 100%; }
  main.homepage .slide-overlay .cta .buttons { flex-wrap: wrap; }
  main.homepage .slide-overlay .cta .buttons .btn { min-height: 44px; }
  main.homepage .pagination { bottom: 24px; width: 100%; justify-content: center; }
  main.homepage .slider { gap: 0; }
  main.homepage .dot { width: 14px; height: 14px; }

  main.homepage section.about, main.about-us section.about { width: auto; margin: 32px 16px; }
  main.homepage section.about .messages, main.about-us section.about .messages { flex-direction: column; gap: 20px; align-items: stretch; }
  main.homepage section.about .messages .featured, main.about-us section.about .messages .featured { width: 100%; font-size: clamp(28px, 5vw, 40px); line-height: 1.4; }
  main.homepage section.about .messages .normal, main.about-us section.about .messages .normal { width: 100%; font-size: 16px; line-height: 1.8; }
  :is(main.homepage, main.about-us) section.home-images { margin: 0; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :is(main.homepage, main.about-us) section.home-images img, :is(main.homepage, main.about-us) section.home-images img:nth-child(n) { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; transform: none; }
  :is(main.homepage, main.about-us) section.home-images img:last-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
  :is(main.homepage, main.about-us) section.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin: 32px 16px; gap: 24px; }
  main.homepage section.services { padding: 32px 20px; border-radius: 24px; margin-bottom: 32px; }
  main.homepage section.services .services-inner { width: 100%; }
  main.homepage section.services .services-inner > .desc { font-size: 20px; line-height: 1.6; }
  main.homepage section.services .services-inner .accordion .acc .acc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; }
  main.homepage section.services .services-inner .accordion .acc .acc-item_title { width: auto; font-size: 22px; line-height: 1.4; }
  main.homepage section.services .services-inner .accordion .acc .acc-item_title br { display: none; }
  main.homepage section.services .services-inner .accordion .acc .acc-item_desc { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  main.homepage section.services .services-inner .accordion .acc .acc-item .up-right { width: 40px; height: 40px; }
  main.homepage section.services .services-inner .accordion .acc .acc-content > img { aspect-ratio: 4/3; object-fit: cover; }
  main.homepage section.services .services-inner .accordion .acc .acc-content .details { left: 12px; bottom: 12px; }
  main.homepage section.services .services-inner .accordion .acc.show .acc-content { max-height: none; }
  main.homepage .portfolio-section, main.about-us .portfolio-section { padding: 32px 16px; border-radius: 24px; }
  main.homepage .portfolio-section .desc, main.about-us .portfolio-section .desc { width: 100%; margin-bottom: 24px; font-size: 20px; line-height: 1.6; }
  main.homepage .portfolio-grid, main.about-us .portfolio-section .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
  main.homepage .portfolio-grid .image-wrapper, main.about-us .portfolio-section .portfolio-grid .image-wrapper { aspect-ratio: 4/3; border-radius: 15px; }
  main.homepage .portfolio-title, main.about-us .portfolio-section .portfolio-title { font-size: 18px; line-height: 1.4; }
  main .tags { flex-wrap: wrap; }
  main .project-questions { width: auto; margin: 32px 0; padding: 0 16px; }

  main.about-us .page-inner { min-height: 0; border-radius: 24px; background: #161d2a; }
  main.about-us .page-inner > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; border-radius: 24px; }
  main.about-us .page-inner_content { position: relative; top: auto; left: auto; padding: 145px 24px 32px; gap: 18px; background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.1)); }
  main.about-us .page-inner_content h1 { max-width: 100%; font-size: clamp(27px, 4.5vw, 36px); line-height: 1.35; letter-spacing: 0; }
  main.about-us .page-inner_content .desc { max-width: 100%; font-size: 14px; line-height: 1.8; }
  main.about-us .page-inner_content ul { max-width: 100%; flex-wrap: wrap; gap: 6px 10px; border-radius: 16px; padding: 12px; line-height: 1.7; }
  main.about-us .about-content { width: auto; margin: 32px 16px; gap: 24px; }
  main.about-us .about-content_left, main.about-us .about-content_right { width: calc(50% - 12px); gap: 20px; }
  main.about-us .about-content .slogan { font-size: 24px; line-height: 1.5; }
  main.about-us .services-content { width: auto; margin: 32px 16px; padding: 0; }
  main.about-us .services-content p.half, main.about-us .services-content p.nearlyfull { width: 100%; }
  main.about-us .services-content h2 { font-size: 22px; line-height: 1.45; }
  main.about-us .services-content .page-details { margin: 20px 0; padding: 20px; gap: 24px; }
  main.about-us .services-content .page-details__left { width: 30%; }
  main.about-us .services-content .page-details__right { width: 70%; }
  main.about-us .services-content .page-details__right ul li a { padding: 12px 20px 12px 0; line-height: 1.6; }
  main.about-us .services-content .page-image-seperator { margin: 24px 0; }
  main.about-us .services-content .accordion { margin: 24px 0; padding: 24px 20px; }
  main.about-us .services-content .accordion .acc .acc-item { gap: 12px; }
  main.about-us .services-content .accordion .acc .acc-item .up-right { flex: 0 0 40px; width: 40px; height: 40px; }
  main.about-us .services-content .accordion .acc.show .acc-content { max-height: none; }
  main.about-us .links { width: auto; padding: 28px 20px; margin: 32px 0; border-radius: 24px; }
  main.about-us .links ul { width: 100%; gap: 10px 18px; }
  main.about-us .links ul li { max-width: 100%; }
  main.about-us .links ul li a { line-height: 1.65; }
  main.about-us .contact-content { margin: 32px 0; }
  main.about-us .contact-content .contact-information { padding: 32px 20px; border-radius: 24px; }
  main.about-us .contact-content .contact-information .boxes { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
  main.about-us .contact-content .contact-information .boxes .box { min-width: 0; padding: 24px 12px; text-align: center; }
  main.about-us .contact-content .contact-form { padding: 24px; margin: 32px 0; border-radius: 24px; gap: 24px; }
  main.about-us .contact-content .contact-form .contact-left { width: 60%; }
  main.about-us .contact-content .contact-form .contact-right { width: 40%; }
  main.about-us .contact-content .contact-form .contact-left .form input, main.about-us .contact-content .contact-form .contact-left .form textarea { font-size: 16px; border-radius: 0; }
  main textarea { resize: vertical; }

  footer.split-hero { padding: 36px 20px; border-radius: 24px; }
  footer .split-hero-content { width: 100%; }
  footer .split-hero-content .footer-title { font-size: 28px; line-height: 1.5; }
  footer.split-hero .contact { flex-wrap: wrap; gap: 24px; padding: 28px 0; margin-top: 28px; text-align: left; }
  footer.split-hero .contact .logo { width: auto; }
  footer.split-hero .contact .logo img { height: 64px; width: auto; }
  footer.split-hero .contact .phone-mail { width: auto; gap: 12px; }
  footer.split-hero .contact .phone-mail .mail { font-size: 20px; }
  footer.split-hero .contact .phone-mail .phone { font-size: 28px; }
  footer.split-hero .contact .address { width: 100%; justify-content: flex-start; line-height: 1.6; }
  footer.split-hero .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; padding: 28px 0; margin-bottom: 28px; text-align: left; }
  footer.split-hero .links .footer-links-toggle { display: none; }
  footer.split-hero .links ul { gap: 4px; }
  footer.split-hero .links ul li a { display: block; padding: 8px 0; line-height: 1.65; color: #b4b9bf; }
  footer.split-hero .links ul li.title a { color: #fff; }
  footer.split-hero .copyright { flex-wrap: wrap; justify-content: center; gap: 20px; }
  footer.split-hero .copyright .site-links, footer.split-hero .copyright .socials, footer.split-hero .copyright .copyright { width: 100%; justify-content: center; }
  footer.split-hero .copyright .site-links ul { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  footer.split-hero .copyright .site-links ul li a { display: inline-block; padding: 8px 0; color: #b4b9bf; }
  footer.split-hero .copyright .copyright { color: #b4b9bf; line-height: 1.6; }

  footer.split-hero .links.footer-links-ready { display: block; width: 100%; padding: 20px 0; margin-bottom: 20px; }
  footer.split-hero .links.footer-links-ready .footer-links-toggle { width: 100%; min-height: 52px; display: flex !important; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid #373f4a; background: transparent; color: #fff; font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
  footer.split-hero .links.footer-links-ready .footer-links-toggle > span:last-child { font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
  footer.split-hero .links.footer-links-ready .footer-links-toggle[aria-expanded="true"] > span:last-child { transform: rotate(45deg); }
  footer.split-hero .links.footer-links-ready .footer-link-group { display: none; width: 100%; padding: 8px 0 16px; }
  footer.split-hero .links.footer-links-ready .footer-link-group.is-expanded { display: flex; }
  footer.split-hero .links.footer-links-ready .footer-link-group li.title { display: none; }
  footer.split-hero .links.footer-links-ready .footer-link-group li a { width: 100%; padding: 9px 0; font-size: 14px; }
}

@media (max-width: 600px) {
  :is(main.homepage, main.about-us) section.counts { grid-template-columns: minmax(0, 1fr); }
  main.homepage .portfolio-grid, main.about-us .portfolio-section .portfolio-grid { grid-template-columns: minmax(0, 1fr); }
  main.about-us .about-content { flex-direction: column; }
  main.about-us .about-content_left, main.about-us .about-content_right { width: 100%; }
  main.about-us .services-content .page-details { flex-direction: column; align-items: stretch; }
  main.about-us .services-content .page-details__left, main.about-us .services-content .page-details__right { width: 100%; }
  main.about-us .contact-content .contact-information .boxes { grid-template-columns: minmax(0, 1fr); }
  main.about-us .contact-content .contact-form { flex-direction: column; align-items: stretch; }
  main.about-us .contact-content .contact-form .contact-left, main.about-us .contact-content .contact-form .contact-right { width: 100%; }
  main.about-us .contact-content .contact-form .contact-left .form { margin-top: 12px; }
  main.about-us .contact-content .contact-form .contact-left .form .form-item { width: 100%; }
  main.about-us .contact-content .contact-information .featured { font-size: 26px; line-height: 1.4; }
  footer.split-hero .contact { flex-direction: column; align-items: flex-start; }
  .whatsapp-panel {
    display: none !important;
  }
}

@media (max-width: 359px) {
  .site-header { gap: 4px; padding: 6px; }
  .site-header .logo { padding-left: 2px; }
  .site-header .logo img { height: 30px; }
  .site-header .get-touch .get-offer { padding-left: 10px; gap: 5px; }
  main.homepage .slide-overlay, main.about-us .page-inner_content { padding-left: 16px; padding-right: 16px; }
}