/* ============================================================
   ANTC — responsive layer
   ------------------------------------------------------------
   Loaded LAST, after base / layout / sections / animations.
   Nothing here rewrites your existing CSS; it only overrides at
   narrow widths. If a rule fights something you already have,
   delete that single rule rather than the file.

   Breakpoints
     1024px  tablet landscape and below
      768px  tablet portrait and below
      480px  phones
      360px  small phones
   ============================================================ */


/* ---- 1. Global overflow guard -----------------------------
   The single most common cause of a "not responsive" site is
   one element wider than the viewport, which gives the whole
   page a horizontal scrollbar. These three rules stop that at
   the source instead of chasing individual offenders.        */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Long words, URLs and email addresses are a frequent culprit. */
p, li, h1, h2, h3, h4, h5,
.testi-text, .svc-desc, .step-desc, .val-desc, .team-body {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Anything that scrolls sideways should do so on its own,
   not by widening the page. */
pre, table, .ticker-wrap {
  max-width: 100%;
  overflow-x: auto;
}


/* ---- 2. Fluid type ----------------------------------------
   clamp() removes the need for a font-size override at every
   breakpoint. Min is the phone size, max is the desktop size. */

.hero-title {
  font-size: clamp(1.9rem, 7vw, 4rem);
  line-height: 1.12;
}

.stitle {
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  line-height: 1.2;
}

.hero-sub,
.ssub {
  font-size: clamp(0.92rem, 2.2vw, 1.06rem);
}

.stat-num {
  font-size: clamp(2rem, 6vw, 3.2rem);
}


/* ---- 3. Section rhythm ------------------------------------ */

.si {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

section {
  padding-block: clamp(3rem, 8vw, 6rem);
}


/* ---- 4. Grids become single column on small screens -------
   auto-fit + minmax means these reflow on their own and keep
   working even when the number of cards changes.             */

@media (max-width: 1024px) {
  .two-col,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .services-grid,
  .testi-grid,
  .process-steps {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    display: grid;
    gap: 2.5rem;
  }

  /* The Kalyani card spans the full grid on desktop. On one
     column that span is meaningless and can cause overflow. */
  .testi-card[style*="grid-column"] {
    grid-column: auto !important;
  }
}

@media (max-width: 768px) {
  .services-grid,
  .testi-grid,
  .process-steps,
  .team-cards,
  .values-row {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .two-col > *,
  .about-grid > * {
    min-width: 0; /* lets grid children shrink below content width */
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}


/* ---- 5. Hero ---------------------------------------------- */

.hero {
  min-height: auto;
  padding-block: clamp(5rem, 14vw, 8rem);
}

.hero-content {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero-btns .btn-primary,
  .hero-btns .btn-ghost {
    width: 100%;
    text-align: center;
  }

  /* The watermark is decorative; at phone width it competes
     with the headline for contrast. */
  .hero-watermark {
    opacity: 0.04;
  }

  .scroll-hint {
    display: none;
  }
}


/* ---- 6. Navigation ----------------------------------------
   These use !important deliberately. The existing stylesheet
   sets nav display with more specific selectors (e.g.
   .nav-right .nav-cta), which would otherwise win here. */

@media (max-width: 900px) {
  nav#main-nav .nav-links,
  .nav-links {
    display: none !important;
  }

  nav#main-nav .hamburger,
  .hamburger {
    display: flex !important;
  }

  /* Already present in the mobile drawer, so it is redundant
     in the bar and crowds the logo at narrow widths. */
  nav#main-nav .nav-right .nav-cta,
  .nav-cta {
    display: none !important;
  }

  nav#main-nav {
    padding-inline: clamp(0.85rem, 4vw, 1.5rem);
    gap: 0.75rem;
  }
}

@media (min-width: 901px) {
  nav#main-nav .hamburger,
  .hamburger {
    display: none !important;
  }
}

/* Stop the page scrolling behind an open drawer.
   Requires js/components.js to toggle body.nav-open. */
body.nav-open {
  overflow: hidden;
}

.mobile-nav {
  max-width: min(320px, 85vw);
}

@media (max-width: 480px) {
  .nav-logo-sub {
    display: none; /* keep the logo lockup from wrapping */
  }

  .nav-logo-img {
    max-height: 32px;
  }
}


/* ---- 7. Contact form -------------------------------------- */

.contact-form {
  width: 100%;
  max-width: 100%;
}

.fg input,
.fg textarea,
.fg select {
  width: 100%;
  max-width: 100%;
  /* 16px minimum stops iOS Safari zooming in on focus. */
  font-size: max(16px, 1rem);
}

.fg textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.submit-btn {
  width: 100%;
}

.field-error {
  font-size: 0.78rem;
  margin-top: 0.35rem;
  color: #fca5a5;
}

.fg .opt {
  opacity: 0.6;
  font-weight: 400;
}


/* ---- 8. Cards and remaining flex rows --------------------- */

.svc-card,
.testi-card,
.process-step,
.team-card,
.val-card,
.arch-card,
.stat-card {
  min-width: 0;
  max-width: 100%;
}

.cp,
.team-card,
.testi-foot,
.case-head {
  flex-wrap: wrap;
}

.arch-row {
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }

  .testi-savings {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---- 9. Touch targets -------------------------------------
   WCAG asks for 44px minimum on anything tappable.           */

@media (pointer: coarse) {
  a.nav-link-item,
  a.mnl,
  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .submit-btn,
  .hamburger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ---- 10. Accessibility ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Elements that GSAP would normally fade in must not stay
     invisible when animation is suppressed. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ---- 11. Print -------------------------------------------- */

@media print {
  nav,
  .mobile-nav,
  .mobile-nav-overlay,
  .scroll-hint,
  .hero-watermark,
  .footer-watermarks {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ---- 12. Safety net for the four deleted sections ---------
   cost / ticker / products / values were removed. If any of
   them is still being loaded because js/components.js has not
   been updated, this hides it rather than letting deleted
   content render. Remove this block once COMPONENTS is fixed. */

#cost,
#products,
#values,
.ticker-wrap {
  display: none !important;
}