/* Responsive layout improvements for Tecxodus pages. */
img,
video,
iframe {
  max-width: 100%;
}

html {
  scroll-padding-top: 18px;
}

body {
  min-width: 320px;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.wrap,
.hero-grid,
.split,
.visibility-grid,
.contact-grid,
.sim-grid,
.sim-form,
.cards,
.clients,
.steps,
.blog-grid,
.grid,
.article,
.dashboard {
  min-width: 0;
}

.hero h1,
.section h2,
.split-copy h2,
.contact h2,
.article h1,
.card h2,
.blog-card h3 {
  overflow-wrap: anywhere;
}

.article img,
.article-content img,
.article-image img {
  height: auto;
  max-width: 100%;
}

.contact .mail-link {
  color: #fff;
  border-color: #b7c5be;
  background: transparent;
}

.contact .mail-link:hover,
.contact .mail-link:focus-visible {
  color: #fff;
  border-color: #d9fb63;
  background: #ffffff12;
}

@media (max-width: 1024px) {
  .nav {
    gap: 12px;
  }

  .navlinks {
    gap: 14px;
  }

  .hero-grid {
    gap: 30px;
  }

  .cards,
  .clients,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .sim-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 24px;
  }

  .sim-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sim-result {
    padding: 22px;
  }
}

@media (max-width: 800px) {
  .wrap {
    width: calc(100% - 32px);
  }

  .nav {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 4px;
  }

  .navlinks,
  header.nav .navlinks {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
    overflow: visible;
    padding: 2px 0 10px;
  }

  .navlinks a,
  header.nav .navlinks a,
  .navlinks a:not(.btn) {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
  }

  .navlinks .btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .hero {
    padding: 48px 0 36px;
  }

  .hero-grid,
  .split,
  .visibility-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .hero-grid {
    gap: 30px;
  }

  .visual,
  .media-box {
    min-height: 280px;
  }

  .section {
    padding: 60px 0;
  }

  .section-head {
    align-items: flex-start;
    gap: 14px;
  }

  .sim-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .sim-result {
    position: static;
    min-width: 0;
  }

  .sim-result .metric {
    font-size: clamp(30px, 7vw, 42px);
    overflow-wrap: anywhere;
  }

  .sim-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sim-form label,
  .sim-lead label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .sim-form input,
  .sim-form select,
  .sim-lead input:not([type="checkbox"]),
  .sim-lead select,
  .toolbar input,
  .toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    font-size: 16px;
  }

  .service-checks {
    align-items: stretch;
  }

  .service-checks label {
    max-width: 100%;
    min-height: 42px;
    white-space: normal;
  }

  .wa-float {
    display: none;
  }

  .mobile-cta {
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    min-height: 48px;
    padding: 13px 16px;
    text-align: center;
    white-space: normal;
  }

  .contact {
    padding-bottom: 88px;
  }

  .footer .wrap {
    display: block;
  }

  .footer span {
    display: block;
    margin-top: 8px;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar input {
    flex: 1 1 100%;
  }

  .toolbar select {
    flex: 1 1 100%;
  }

  .article {
    width: 100%;
    margin: 24px auto 40px;
    padding: clamp(20px, 5vw, 38px);
  }

  .article-content {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .article-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .article-content pre {
    max-width: 100%;
    overflow-x: auto;
  }

  .cta,
  .related {
    padding: 20px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .topbar {
    font-size: 10px;
  }

  .topbar .wrap {
    gap: 5px 12px;
    flex-wrap: wrap;
  }

  .brand {
    font-size: 22px;
  }

  .hero {
    padding: 38px 0 30px;
  }

  .hero h1 {
    font-size: clamp(36px, 10.5vw, 50px);
  }

  .hero p {
    font-size: 16px;
  }

  .hero-actions {
    gap: 9px;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
    min-height: 46px;
    font-size: 14px;
  }

  .hero-proof {
    gap: 10px 16px;
    margin-top: 24px;
  }

  .visual,
  .media-box {
    min-height: 230px;
    border-radius: 18px;
  }

  .cam-card {
    right: 10px;
    bottom: 10px;
    width: min(205px, calc(100% - 20px));
    padding: 12px 14px;
  }

  .tech-panel {
    right: 10px;
    bottom: 10px;
    width: min(250px, calc(100% - 20px));
  }

  .section {
    padding: 48px 0;
  }

  .section h2,
  .split-copy h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .section-head {
    display: block;
    margin-bottom: 24px;
  }

  .section-head p {
    margin-top: 12px;
  }

  .cards,
  .clients,
  .steps,
  .blog-grid,
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .card,
  .blog-card {
    min-height: 0;
    padding: 20px;
  }

  .sim-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-result {
    padding: 18px;
    border-radius: 18px;
  }

  .sim-lead {
    grid-column: 1;
  }

  .service-checks label {
    flex: 1 1 calc(50% - 8px);
    justify-content: flex-start;
  }

  .article h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .article .lead {
    font-size: 17px;
  }

  .article-image {
    margin: 18px 0 22px;
  }

  .article-image img {
    max-height: 300px;
  }

  .related ul {
    padding-left: 20px;
  }

  .faq summary {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Tecxodus service images and image-led warehouse sections */
.service-cards .card{padding:0 0 22px;overflow:hidden;min-height:0}
.service-cards .card .num,.service-cards .card h3,.service-cards .card p{display:block;margin-left:22px;margin-right:22px}
.service-cards .card .num{margin-top:19px}
.service-cards .card h3{margin-top:13px;margin-bottom:8px}
.service-image{display:block;width:100%;height:168px;object-fit:cover}
.service-scope{margin:18px 0 0;color:#62716d;font-size:13px}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual:after{z-index:1}
.media-box.with-photo{background-image:none!important}
.media-box.with-photo:before,.media-box.with-photo:after{display:none}
.site-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.with-photo:after{display:block;z-index:2}
.transport-photo:after{background:#0c2825d9;color:white}
@media(max-width:800px){.service-image{height:150px}.hero-actions .btn{margin-bottom:8px}}

/* Video excerpts, WMS example and renewed client references */
.hero-video{display:block}
.video-grid{display:grid;grid-template-columns:minmax(0,850px);justify-content:center;gap:18px}
.video-card{margin:0;padding:12px;border:1px solid var(--line);border-radius:20px;background:#fff}
.video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:13px;background:#10221f}
.video-card figcaption{padding:12px 4px 2px;color:var(--muted);font-size:14px}
.dashboard-figure{margin:0;padding:12px}
.dashboard-figure img{display:block;width:100%;height:auto;border-radius:12px;background:white}
.dashboard-figure figcaption{margin:10px 4px 2px;color:#d4ded8;font-size:12px;line-height:1.45}
.references{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.references h3{margin:0 0 22px;font-size:20px}
.reference-note{max-width:720px;margin:-10px 0 24px;color:var(--muted);font-size:14px}
.reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.reference-logo{display:flex;align-items:center;justify-content:center;min-height:104px;padding:12px 18px;border:1px solid var(--line);border-radius:15px;background:#fff}
.reference-logo img{display:block;width:100%;height:76px;object-fit:contain}
@media(max-width:800px){.video-grid{grid-template-columns:1fr}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.references{margin-top:40px}}