/* ==========================================================================
   DELTIV — Mobile & Tablet Responsive Overlay
   Loaded after style.css. Desktop styles are unchanged.
   ========================================================================== */

/* ── Touch devices: restore native cursor ── */
@media (hover: none), (pointer: coarse) {
  *,
  a, button, input, select, textarea, label,
  [role="button"], [tabindex], summary,
  a *, button * {
    cursor: auto !important;
  }

  #cursor-ring {
    display: none !important;
  }
}

/* ── Global overflow & base sizing ── */
@media (max-width: 1024px) {
  html {
    font-size: 15px;
  }

  .nav-container {
    padding: 0 20px;
    justify-content: flex-end;
  }

  .nav-decor {
    font-size: 0.65rem;
    top: 28px;
  }

  .nav-decor-left {
    left: 16px;
  }

  .nav-decor-right {
    right: 16px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .nav-decor {
    display: none;
  }

  .navbar {
    mix-blend-mode: normal;
    top: 12px;
  }

  .nav-container {
    padding: 0 16px;
  }

  .mobile-nav-toggle {
    display: flex !important;
    position: fixed;
    right: 20px;
    top: 22px;
    pointer-events: auto;
    z-index: 102;
  }

  .mobile-nav-toggle span {
    background-color: #0f172a;
  }

  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: min(300px, 85vw) !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 80px 32px 40px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-y: auto !important;
    background: #09090c !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .nav-menu:hover {
    max-width: none !important;
    padding: 80px 32px 40px !important;
    background: #09090c !important;
    box-shadow: none !important;
  }

  .nav-menu.open {
    right: 0 !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5) !important;
  }

  .nav-menu-links {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    white-space: normal !important;
  }

  .nav-menu:hover .nav-menu-links {
    opacity: 1 !important;
    transform: none !important;
  }

  .nav-dots {
    display: none !important;
  }

  .nav-item,
  .nav-btn {
    width: 100%;
    text-align: center;
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }

  .nav-btn {
    margin-top: 8px;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ── Hero section ── */
@media (max-width: 1024px) {
  .hero-scroll-track {
    height: 550vh;
  }

  .hero-center-block {
    width: 96vw !important;
    height: 78vh !important;
    border-radius: 28px !important;
  }

  .hero-main-title {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
    letter-spacing: -1px !important;
  }

  .hero-pre-title {
    font-size: 0.8rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 14px !important;
  }

  .hero-btn {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }

  .hero-laptop {
    width: 92vw !important;
    bottom: -10vh !important;
  }

  .hero-expertise-carousel {
    top: 52% !important;
  }

  .hero-expertise-slide {
    left: 8vw !important;
    width: 84vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-expertise-title {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
  }

  .hero-expertise-desc {
    font-size: 0.85rem !important;
    max-width: 100% !important;
  }

  .hero-expertise-list li {
    font-size: 0.72rem !important;
    padding: 8px 14px !important;
  }

  #hero-content {
    top: 22% !important;
    padding: 0 6% !important;
  }

  .hero-head-logo {
    height: 22px !important;
    margin-bottom: 12px !important;
  }

  #device-4 .hardware-shell {
    height: 55vh !important;
    max-height: 420px !important;
  }
}

@media (max-width: 768px) {
  .hero-scroll-track {
    height: 450vh;
  }

  .hero-center-block {
    width: 100vw !important;
    height: 72vh !important;
    border-radius: 20px !important;
  }

  .hero-sticky-viewport {
    align-items: flex-start;
    padding-top: 8vh;
  }

  .hero-main-title {
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    margin-bottom: 20px !important;
  }

  .hero-laptop {
    width: 100vw !important;
    bottom: -5vh !important;
    top: auto !important;
  }

  .hero-expertise-heading {
    font-size: 0.85rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .hero-expertise-carousel {
    top: 48% !important;
    width: 100% !important;
  }

  .hero-expertise-slide {
    left: 5vw !important;
    width: 90vw !important;
  }

  .hero-expertise-list {
    gap: 6px !important;
  }

  .hero-expertise-list li {
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero-content {
    top: 18% !important;
  }
}

@media (max-width: 480px) {
  .hero-scroll-track {
    height: 400vh;
  }

  .hero-center-block {
    border-radius: 16px !important;
  }

  .hero-main-title br {
    display: block;
  }

  .hero-btn {
    width: 100%;
    max-width: 260px;
  }
}

/* ── What Makes Us Different ── */
@media (max-width: 1024px) {
  .diff-cutout-title {
    white-space: normal !important;
    font-size: clamp(2.8rem, 12vw, 6rem) !important;
    line-height: 0.95 !important;
  }

  .diff-content-layer {
    margin-top: 100vh !important;
    padding-top: 12vh !important;
    padding-bottom: 12vh !important;
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

  .diff-row {
    padding: 40px 0 !important;
  }

  .diff-row-left {
    flex: none !important;
    width: 100% !important;
  }

  .diff-row-right {
    justify-content: flex-start !important;
  }

  .diff-row-right p {
    max-width: 100% !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 768px) {
  .diff-cutout-title {
    font-size: clamp(2.2rem, 11vw, 4rem) !important;
    margin-bottom: 24px !important;
  }

  .diff-content-layer {
    margin-top: 80vh !important;
    padding-top: 8vh !important;
    padding-bottom: 8vh !important;
  }

  .diff-row {
    padding: 32px 0 !important;
  }

  .diff-row-title {
    font-size: 1.25rem !important;
  }

  .diff-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ── Tech We Use ── */
@media (max-width: 1024px) {
  .tech-transition-spacer {
    height: 40vh !important;
  }

  .tech-editorial-inner {
    padding: 0 5vw 80px !important;
  }

  .tech-editorial-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }

  .tech-editorial-header-right {
    align-items: flex-start !important;
    padding-bottom: 0 !important;
    gap: 32px !important;
  }

  .tech-ed-title {
    font-size: clamp(3.5rem, 14vw, 8rem) !important;
  }

  .tech-ed-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 32px 0 !important;
  }

  .tech-ed-row:hover {
    padding-left: 0 !important;
  }

  .tech-ed-row-num {
    font-size: 2.5rem !important;
  }

  .tech-ed-row-items {
    gap: 8px !important;
    padding-top: 0 !important;
  }

  .tech-ed-item {
    font-size: 0.8rem !important;
    padding: 6px 14px !important;
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .tech-transition-spacer {
    height: 30vh !important;
  }

  .tech-ed-stat-n {
    font-size: 2rem !important;
  }

  .tech-ed-row-cat {
    font-size: 0.7rem !important;
  }
}

/* ── Behind The Code ── */
@media (max-width: 1024px) {
  .intro-block {
    margin-top: 60vh !important;
  }

  .scroll-track {
    height: 320vh !important;
  }

  .huge-text {
    font-size: 18vw !important;
    white-space: normal !important;
    line-height: 0.9 !important;
  }

  .photo-container {
    width: 220px !important;
    height: 300px !important;
  }

  .info-text-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 0 6% 10vh 6% !important;
    gap: 24px !important;
  }

  .intro-text-left,
  .intro-text-right {
    width: 100% !important;
  }

  .intro-text-left h2 {
    font-size: 2.5rem !important;
  }

  .intro-text-left p,
  .intro-text-right p {
    font-size: 1rem !important;
  }

  .intro-footer {
    padding: 0 20px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 768px) {
  .intro-block {
    margin-top: 40vh !important;
  }

  .scroll-track {
    height: 280vh !important;
  }

  .huge-text {
    font-size: 16vw !important;
  }

  .photo-container {
    width: 180px !important;
    height: 250px !important;
  }

  .intro-text-left h2 {
    font-size: 2rem !important;
    margin-bottom: 12px !important;
  }

  .intro-footer-content {
    padding: 60px 6% 30px 6% !important;
    min-height: auto !important;
  }

  .footer-upper {
    gap: 40px !important;
  }

  .footer-giant-text {
    font-size: clamp(4rem, 22vw, 10rem) !important;
    right: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ── Contact section ── */
@media (max-width: 1024px) {
  .contact-section {
    padding: 60px 4% !important;
    min-height: auto !important;
  }

  .contact-curved-box {
    border-radius: 28px !important;
  }

  .contact-layout-split {
    flex-direction: column !important;
  }

  .contact-left,
  .contact-right {
    padding: 28px 24px !important;
  }

  .contact-divider-container {
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 24px !important;
    gap: 16px !important;
  }

  .contact-divider-container .divider-line {
    width: auto !important;
    height: 1px !important;
    flex: 1 !important;
  }

  .contact-divider-container .divider-or {
    padding: 0 8px !important;
    flex-shrink: 0;
  }

  .ai-overlay {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  .ai-info h4 {
    font-size: 1.3rem !important;
  }

  .contact-features-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .contact-form-panel {
    padding: 28px 24px !important;
  }

  .form-title {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 40px 16px !important;
  }

  .contact-curved-box {
    border-radius: 20px !important;
  }

  .contact-left,
  .contact-right {
    padding: 24px 18px !important;
  }

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

  .service-select-group,
  .light-btn {
    grid-column: 1 !important;
  }

  .contact-alt-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .inline-alt-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .ai-start-btn {
    width: 100% !important;
  }

  .ai-action {
    width: 100% !important;
  }

  .sophisticated-ai-block {
    min-height: 200px;
  }
}

@media (max-width: 480px) {
  .form-title {
    font-size: 1.5rem !important;
  }

  .contact-pill-badge {
    font-size: 0.62rem !important;
  }
}

/* ── Section containers & utilities ── */
@media (max-width: 768px) {
  .section-container {
    padding: 60px 16px !important;
  }

  .section-title {
    font-size: 1.8rem !important;
  }

  .section-desc {
    font-size: 1rem !important;
    margin-bottom: 40px !important;
  }
}

/* ── Prevent horizontal scroll from wide children ── */
@media (max-width: 1024px) {
  .hero-expertise-carousel,
  .hero-laptop,
  .tech-editorial-inner,
  .diff-list-container {
    max-width: 100vw;
  }

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