/* =========================================================================
   Mobile layer — loaded last. Mostly <= 767px; a few rules use 991px, where
   the desktop two-column grids collapse to one.
   Goal: native-app feel — rounded cards, 44px touch targets, one consistent
   page gutter, no hover-only or cursor-driven behaviour.
   Desktop is untouched: every rule below sits inside a mobile media query.
   ========================================================================= */

/* ===== Tokens + touch base ===== */
@media (max-width: 767px) {
  :root {
    --td-gutter: 16px;      /* single page gutter, used everywhere */
    --td-r-lg: 22px;        /* section / hero corners */
    --td-r-md: 18px;        /* cards */
    --td-r-sm: 12px;        /* inputs, chips, small controls */
    --td-tap: 44px;         /* minimum touch target */
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    /* no rubber-band sideways drag when a decorative layer pokes out */
    overscroll-behavior-x: none;
  }

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

  /* Nothing may scroll the page sideways. */
  .td-hero,
  .td-cta,
  .td-who,
  .td-webdev,
  .td-achieve,
  .td-showcase,
  .td-svc-promo,
  .td-svc-hero {
    overflow: hidden;
  }
}

/* ===== Safe areas (notch / home indicator) =====
   Needs viewport-fit=cover in the viewport meta, which header.php sets. */
@media (max-width: 767px) {
  .td-hero {
    margin: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));
  }

  .td-svc-topbar,
  .td-svc-promo-topbar {
    padding-top: calc(20px + env(safe-area-inset-top));
  }

  .td-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Start near the top — just far enough to clear the close (X) button, which
     sits above the panel at the page's top-right. */
  .td-menu-inner {
    padding: calc(58px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  }
}

/* ===== Slide-in menu on a phone =====
   Tighter rows and smaller type so the whole list — Services dropdown open —
   fits without scrolling. */
@media (max-width: 767px) {
  /* The panel carries its own 100px top padding on top of .td-menu-inner's,
     which pushed the first row a third of the way down the screen. The inner
     padding above is the only one that should set the offset. */
  .td-menu {
    padding: 0;
  }

  .td-menu-close {
    top: 14px;
    right: 16px;
  }

  .td-menu-eyebrow {
    margin-bottom: 16px;
  }

  .td-menu-label {
    font-size: 22px;
  }

  .td-menu-list a,
  .td-menu-sub-toggle {
    gap: 14px;
    padding: 12px 0;
  }

  .td-menu-num {
    font-size: 11px;
  }

  .td-menu-arrow,
  .td-menu-caret {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .td-menu-subitem a,
  .td-menu-list .sub-menu a {
    padding: 9px 0 9px 25px;
    font-size: 14.5px;
    min-height: 0;
  }

  .td-menu-foot {
    margin-top: 26px;
    padding-top: 20px;
  }

  .td-menu-email {
    font-size: 15px;
  }

  .td-menu-social {
    gap: 18px;
    margin-top: 16px;
  }
}

/* ===== Touch targets =====
   Small links get a real 44px hit area; the toggle gets an invisible one so
   its 3-bar artwork keeps its size. */
@media (max-width: 767px) {
  .td-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--td-tap);
    height: var(--td-tap);
    transform: translate(-50%, -50%);
  }

  .td-menu-list a,
  .td-footer-nav-col a,
  .td-footer-legal a,
  .td-menu-social a,
  .td-cta-social-link,
  .td-final-cta-link,
  .td-who-cta,
  .td-about-card-link,
  .td-contact-side-cta,
  .td-svc-ghost-link,
  .td-hero-contact-email {
    display: inline-flex;
    align-items: center;
    min-height: var(--td-tap);
  }

  .td-footer-nav-col a,
  .td-menu-list a {
    display: flex;
  }

  .td-industries-prev,
  .td-industries-next,
  .td-industries-nav-arrow,
  .td-testimonial-more,
  .td-services-more,
  .td-about-founder-social a,
  .td-team-social a,
  .td-svc-promo-social-link {
    min-height: var(--td-tap);
    min-width: var(--td-tap);
  }

  .td-about-founder-social a,
  .td-team-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .td-services-item-title a,
  .td-cta-btn-text,
  .td-hero-contact-btn,
  .td-contact-side-item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--td-tap);
  }

  .td-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--td-tap);
  }

  /* Buttons: full-width and thumb-sized, the way an app sheet does it. */
  .td-btn,
  .td-cta-btn-primary,
  .td-final-cta-btn,
  .td-showcase-btn,
  .td-achieve-btn,
  .td-stats-btn,
  .td-404-btn,
  .td-ty-btn,
  .td-svc-promo-btn {
    min-height: var(--td-tap);
    white-space: nowrap;
  }

  .td-final-cta-actions,
  .td-svc-hero-actions,
  .td-svc-intro-actions,
  .td-404-actions,
  .td-stack-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .td-final-cta-actions > *,
  .td-svc-hero-actions > *,
  .td-svc-intro-actions > *,
  .td-404-actions > * {
    justify-content: center;
    text-align: center;
  }
}

/* ===== Hero top bar ===== */
@media (max-width: 767px) {
  /* "Get Started" was wrapping onto two lines next to the burger. */
  .td-hero-topbar-right {
    gap: 14px;
  }

  .td-hero-topbar-right .td-btn-sm {
    padding: 11px 18px;
    font-size: 13.5px;
  }
}

/* ===== Card language: one radius, one gutter ===== */
@media (max-width: 767px) {
  .td-about-card,
  .td-services-item,
  .td-testimonial-card,
  .td-who-feature,
  .td-contact-side-card,
  .td-contact-side-item,
  .td-contact-form,
  .td-svc-timeline-card,
  .td-team-card,
  .td-svc-enquiry-form,
  .td-cta-float-card {
    border-radius: var(--td-r-md);
  }

  .td-hero,
  .td-stack-panel,
  .td-showcase-inner,
  .td-industries-swiper .swiper-slide {
    border-radius: var(--td-r-lg);
  }

  /* Same left/right edge on every section so the page reads as one stack. */
  .td-about,
  .td-services,
  .td-stats,
  .td-testimonial,
  .td-who,
  .td-webdev,
  .td-achieve,
  .td-showcase,
  .td-final-cta,
  .td-footer,
  .td-contact-section,
  .td-svc-intro,
  .td-svc-why,
  .td-svc-offer,
  .td-svc-process,
  .td-svc-faq {
    padding-left: var(--td-gutter);
    padding-right: var(--td-gutter);
  }

  .td-industries-head,
  .td-industries-nav {
    padding-left: var(--td-gutter);
    padding-right: var(--td-gutter);
  }
}

/* ===== Forms =====
   iOS Safari zooms the page whenever a focused field is under 16px. */
@media (max-width: 767px) {
  input,
  select,
  textarea,
  .wpcf7 input,
  .wpcf7 textarea,
  .wpcf7 select,
  .td-svc-enquiry-field input,
  .td-svc-enquiry-field select,
  .td-contact-form input,
  .td-contact-form textarea,
  .td-contact-form select {
    font-size: 16px;
    max-width: 100%;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    width: 100%;
    border-radius: var(--td-r-sm);
    -webkit-appearance: none;
    appearance: none;
  }

  .wpcf7 input[type="submit"],
  .td-contact-form-submit,
  .td-svc-enquiry-submit {
    width: 100%;
    min-height: var(--td-tap);
    border-radius: var(--td-r-sm);
  }

  .td-svc-enquiry-form {
    flex-direction: column;
  }
}

/* The enquiry bar's validation tips are pinned below their field (service.css).
   Once the fields stop being a single row they need that space reserved on each
   field, or a tip lands on top of the field beneath it. */
@media (max-width: 991px) {
  .wpcf7-form.invalid .td-svc-enquiry-field:has(.wpcf7-not-valid-tip) {
    margin-bottom: 22px;
  }

  .wpcf7-form.invalid .td-svc-enquiry-form {
    padding-bottom: 10px;
  }
}

/* ===== About =====
   Desktop is two columns: the left copy sticks while the right cards scroll
   up and stack over each other. At <= 991px the grid collapses to one column,
   so both sets of sticky elements pin into the same track and overlap — the
   copy sits under the cards and each card covers the last. Unstick them and
   let the section read as a plain stack. */
@media (max-width: 991px) {
  .td-about-left,
  .td-about-card {
    position: static;
    top: auto;
  }

  .td-about-card:nth-child(1),
  .td-about-card:nth-child(2),
  .td-about-card:nth-child(3) {
    z-index: auto;
  }

  .td-about-card {
    margin-bottom: 16px;
  }

  .td-about-card:last-child {
    margin-bottom: 0;
  }
}

/* ===== "Let's Work Together" CTA =====
   Desktop lays the copy over a wide stage with a hand entering from each
   corner. At phone width the hands sat behind the headline as two faint
   smudges and read as nothing. Stack it instead: copy first, then a band
   below it where the two hands meet — the handshake becomes the section's
   image rather than its wallpaper. The scroll-driven approach still runs
   (footer.php), with its travel scaled down to the viewport. */
@media (max-width: 767px) {
  /* Social pills: one line, small, drifting right to left. The two halves are
     identical, so translating the pair by exactly half its width loops
     seamlessly. Spacing is margin, not gap — see initCtaSocialMarquee. */
  .td-cta-social {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }

  .td-cta-social-marquee {
    display: flex;
    width: max-content;
    animation: tdCtaSocialScroll 20s linear infinite;
  }

  .td-cta-social-track,
  .td-cta-social-track--clone {
    display: flex;
    flex: 0 0 auto;
  }

  .td-cta-social-link {
    flex: 0 0 auto;
    min-height: 0;
    margin-right: 10px;
    padding: 5px 13px;
    font-size: 12px;
    white-space: nowrap;
  }

  .td-cta-stage {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 200px; /* the handshake band */
  }

  .td-cta-content {
    position: relative;
    z-index: 3;
  }

  .td-cta-title-1 {
    font-size: 44px;
  }

  .td-cta-title-2 {
    font-size: 34px;
    margin-bottom: 24px;
  }

  .td-cta-btn-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .td-cta-btn-primary {
    justify-content: space-between;
    padding: 6px 6px 6px 22px;
    font-size: 15px;
  }

  /* The bare text link needs an edge of its own once it is full width. */
  .td-cta-btn-text {
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
  }

  /* Both hands sit in the band, reaching in from opposite edges. */
  .td-cta-hand {
    opacity: 1;
    max-width: none;
  }

  .td-cta-hand-1 {
    width: 74%;
    top: auto;
    bottom: 78px;
    left: -20%;
  }

  .td-cta-hand-2 {
    width: 72%;
    bottom: -18px;
    right: -18%;
  }

  .td-cta-glow {
    top: auto;
    bottom: 20px;
    right: 50%;
    width: 260px;
    height: 260px;
    transform: translateX(50%);
  }

  /* A "scroll down" cue belongs to a full-height hero, not to a mid-page
     section on a phone. */
  .td-cta-scroll {
    display: none;
  }
}

@keyframes tdCtaSocialScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .td-cta-social-marquee {
    animation: none;
  }
}

/* ===== Second (black) hero =====
   It keeps a full-viewport floor from the desktop layout. Its mobile content
   stops around 610px, so on a tall phone the floor left ~190px of empty black
   below the guarantee badge. Unlike .td-hero — which is naturally taller than
   the screen and so never hits its floor — this one has nothing to fill it.
   Let the section hug its content instead. */
@media (max-width: 767px) {
  .td-hero-old {
    min-height: 0;
  }

  .td-hero-old-main {
    flex: 0 0 auto;
  }
}

/* ===== Web dev showcase =====
   "BOOST YOUR SALES" is one styled word per letter; at 13vw the second line
   overran the gutter and dropped its last letter. And the CTA invited a hover
   that a touchscreen cannot perform, so it carries a second label. */
@media (max-width: 767px) {
  .td-webdev-heading {
    font-size: clamp(28px, 11vw, 56px);
  }

  .td-webdev-foot {
    align-items: stretch;
  }

  .td-webdev-more {
    margin-left: 0;
    align-self: stretch;
    justify-content: space-between;
  }
}

@media (hover: none), (max-width: 767px) {
  .td-webdev-more-label {
    display: none;
  }

  .td-webdev-more-label--touch {
    display: inline;
  }
}

/* ===== Testimonials =====
   The avatars orbit the quote on a circle sized from the container's width.
   At phone widths that radius lands them on top of the text. Lay the quote
   out normally and put the avatars in a swipeable strip beneath it; the JS
   skips its orbit positioning at this breakpoint to match. */
@media (max-width: 767px) {
  .td-testimonial-circle {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: auto;
    margin-top: 24px;
    overflow: visible;
  }

  .td-testimonial-cards {
    position: static;
    order: 1;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .td-testimonial-circle-track {
    position: static;
    order: 2;
    display: flex;
    gap: 10px;
    inset: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .td-testimonial-circle-track::-webkit-scrollbar {
    display: none;
  }

  .td-testimonial-avatar {
    position: static;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: 0;
    scroll-snap-align: center;
  }
}

/* ===== Stats counter =====
   The mosaic digits and the "+" are a nowrap flex row; neither could shrink
   far enough to fit a phone, so the "+" hung past the edge. */
@media (max-width: 767px) {
  .td-stats-number,
  .td-stats-number > * {
    min-width: 0;
  }

  .td-stats-mosaic-img {
    max-width: 100%;
    height: auto;
  }

  .td-stats-plus {
    width: clamp(34px, 12vw, 56px);
    flex: 0 0 auto;
  }
}

/* ===== Contact page overflow guards ===== */
@media (max-width: 767px) {
  .td-contact-side,
  .td-contact-side-item,
  .td-contact-form-wrap {
    min-width: 0;
  }

  /* Long addresses and phone numbers must wrap, not widen the page. */
  .td-contact-side-item a,
  .td-contact-side-item p,
  .td-footer-nav-col a,
  .td-menu-email,
  .td-footer-hero-cta,
  .td-hero-contact-email {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ===== Service page timeline =====
   The reveal animation parks cards 70px off-axis; horizontally that pushed
   them past the viewport. On mobile reveal vertically instead. */
@media (max-width: 767px) {
  .td-svc-timeline-side--left .td-svc-timeline-card,
  .td-svc-timeline-side--right .td-svc-timeline-card {
    transform: translateY(24px);
  }

  .td-svc-timeline-card.is-visible {
    transform: translateY(0);
  }

  .td-svc-timeline-side--left .td-svc-timeline-card:hover,
  .td-svc-timeline-side--right .td-svc-timeline-card:hover {
    transform: translateY(0);
  }
}

/* ===== Decorative layers that only make sense with a mouse ===== */
@media (hover: none), (max-width: 767px) {
  .td-cursor-dot,
  .td-cursor-ring,
  .td-hero-lines-glow,
  .td-hero-old-lines-glow,
  .td-svc-promo-lines-glow,
  .td-webdev-cursor,
  .td-showcase-img-glow {
    display: none !important;
  }

  /* Parallax pushes these past the edge on a narrow screen. */
  .td-cta-float-card {
    display: none;
  }

  /* The bulb's lit state is hover-only, so touch users never see it. */
  .td-who-bulb-on {
    opacity: 1;
  }

  .td-who-bulb-off {
    opacity: 0;
  }
}

/* ===== Footer ball pit =====
   The pit spans the footer and the balls settle across it. On desktop the
   footer is wide enough that they land clear of the copy; in a narrow single
   column they land on top of it, and they are visible raining down over the
   section above while they fall. They carry no link, so drop them here —
   footer.php skips the physics loop to match. */
@media (max-width: 767px) {
  .td-footer-ballpit {
    display: none;
  }
}

/* ===== Narrow phones ===== */
@media (max-width: 400px) {
  :root {
    --td-gutter: 14px;
  }

  .td-hero-title {
    font-size: 24px;
  }

  .td-footer-nav {
    gap: 22px 24px;
  }

  .td-footer-nav-col {
    flex: 1 1 100%;
  }
}

/* ===== Motion ===== */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}