/* ==========================================================================
   Digital Solutions 4India — Responsive layer
   Breakpoints: ≥1440 (large), ≤1279 (nav collapses), 1280–1439 (compact nav), ≤1024 (tablet landscape),
   ≤768 (tablet portrait), ≤480 (small phones).
   ========================================================================== */

@media (min-width: 1440px) {
  :root { --container: 1280px; }
}

/* ---------- Compact desktop navigation ---------- */
@media (min-width: 1280px) and (max-width: 1439px) {
  .header-inner { gap: 16px; }
  .brand-name small { display: none; }
  .brand-name { font-size: 1rem; }
  .nav-link { padding: 10px 7px; font-size: .86rem; }
  .nav-link[aria-current="page"]::after, .nav-item.is-current > .nav-row .nav-link::after { left: 7px; right: 7px; }
  .nav-toggle-sub { margin-left: -6px; width: 22px; }
  .header-cta { padding-inline: 16px; }
}

/* ---------- Navigation collapses to the mobile panel ---------- */
@media (max-width: 1279px) {
  .main-nav, .header-cta { display: none; }
  .menu-btn { display: grid; }

  .mobile-nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--gutter) 40px;
    background: #fff;
    border-top: 1px solid var(--c-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter would make the header the containing block of the fixed panel */
  body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }

  /* Without JavaScript the panel is simply part of the page flow */
  .no-js .mobile-nav { position: static; opacity: 1; visibility: visible; transform: none; border-bottom: 1px solid var(--c-border); }
  .no-js .menu-btn, .no-js .m-toggle { display: none; }

  .m-list { margin: 0; padding: 0; list-style: none; }
  .m-list > li { border-bottom: 1px solid var(--c-border); }
  .m-row { display: flex; align-items: center; justify-content: space-between; }
  .m-link {
    flex: 1;
    display: block;
    padding: 16px 4px;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    text-decoration: none;
  }
  .m-link[aria-current="page"] { color: var(--c-blue-700); }
  .m-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: #fff;
    color: var(--c-ink-2);
    cursor: pointer;
  }
  .m-toggle .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease); }
  .m-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .m-sub { display: grid; gap: 2px; margin: 0; padding: 0 0 14px; list-style: none; }
  .js .m-sub[hidden] { display: none; }
  .m-sub a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    color: var(--c-ink-2);
    font-size: .96rem;
    font-weight: 500;
    text-decoration: none;
  }
  .m-sub a:hover, .m-sub a[aria-current="page"] { background: var(--c-bg-tint); color: var(--c-blue-700); }
  .m-sub .icon { width: 18px; height: 18px; color: var(--c-blue); }
  .m-cta { display: grid; gap: 12px; margin-top: 24px; }
  .m-contact { margin-top: 24px; color: var(--c-muted); font-size: .9rem; }
  .m-contact a { color: var(--c-ink); font-weight: 600; text-decoration: none; }
}

/* ---------- ≤1024px ---------- */
@media (max-width: 1024px) {
  .grid-4, .team-grid, .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .offer-grid, .offer-grid--4, .related-grid, .approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 620px; margin-inline: auto; width: 100%; }
  .hero-copy { max-width: 720px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process::before, .process::after { display: none; }
  .lead-layout, .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .mega-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-aside { display: none; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .contact-cards > :last-child { grid-column: 1 / -1; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-cell:nth-child(3n) { border-right: 1px solid var(--c-border); }
  .value-cell:nth-child(2n) { border-right: 0; }
  .value-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--c-border); }
  .value-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-grid > :nth-child(n) { grid-column: span 1; min-height: 360px; }
  .industry-grid > :nth-child(7) { grid-column: 1 / -1; }
  .industry-grid > :nth-child(6) { grid-column: span 1; }
  .founder-card { grid-template-columns: 1fr; }
  .founder-card .portrait { min-height: 0; aspect-ratio: 16 / 10; }
  .stat-free-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-free-band > div:nth-child(3) { border-left: 0; }
  .stat-free-band > div:nth-child(n+3) { border-top: 1px solid var(--c-border); }
  .cta-band--split { grid-template-columns: 1fr; }
  .cta-band--split .btn-row { justify-content: flex-start; }
  .sticky-media { position: static; }
  .sticky-media .frame { aspect-ratio: 16 / 10; }
}

/* Hero form on tablets/phones: form first, photo hidden */
@media (max-width: 1024px) {
  .hero-visual--form { padding: 0; max-width: 560px; }
  .hero-visual--form .hero-photo--back, .hero-visual--form .float-card, .hero-visual--form .hero-frame, .hero-visual--form .hero-ring { display: none; }
  .form-card--quick { margin-top: 0; max-width: none; }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  :root { --header-h: 68px; }
  .split, .grid-2, .legal-layout { grid-template-columns: 1fr; }
  .js .reveal--left, .js .reveal--right { transform: translateY(26px); }
  .split--reverse > :first-child { order: 0; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .grid-3, .offer-grid, .offer-grid--4, .related-grid, .approach-grid { grid-template-columns: 1fr; }
  .mini-features, .check-list--2, .usecase-list, .challenge-list { grid-template-columns: 1fr; }
  .form-grid, .form-grid--quick { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .wa-panel { flex-direction: column; align-items: flex-start; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .hero-banner { aspect-ratio: 16 / 10; }
  .media-stack .ms-small { right: 0; width: 42%; }
  .float-card--a { left: 0; }
  .float-card--b { right: 0; width: 190px; }
  .page-hero .split { gap: 36px; }

  /* Process becomes a vertical timeline */
  .process { grid-template-columns: 1fr; gap: 0; }
  .process-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; text-align: left; padding-bottom: 22px; }
  .process-step::before {
    content: "";
    position: absolute;
    left: 27px; top: 60px; bottom: 0;
    width: 2px;
    background: var(--grad-brand);
    opacity: .35;
    transform-origin: top;
  }
  .process-step:last-child::before { display: none; }
  .process-step .step-dot { width: 56px; height: 56px; margin: 0; }
  .process-step .step-card { min-height: 0; }
}

/* ---------- ≤600px ---------- */
@media (max-width: 600px) {
  .grid-4, .team-grid, .benefit-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-card .info { padding: 14px 14px 16px; }
  .team-card h3 { font-size: .98rem; }
  .team-card .role { font-size: .8rem; }
  .client-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .client-card { min-height: 128px; padding: 18px 12px 14px; }
  .client-card img { width: 100%; height: 52px; }
  .industry-grid, .ind-grid { grid-template-columns: 1fr; }
  .industry-grid > :nth-child(n) { min-height: 340px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-cell:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .value-cell:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .stat-free-band { grid-template-columns: 1fr; }
  .stat-free-band > div + div { border-left: 0; border-top: 1px solid var(--c-border); }
}

/* ---------- ≤480px ---------- */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .btn-row .btn { width: 100%; }
  .hero h1 { letter-spacing: -.03em; }
  .hero-visual { padding: 18px 8px 34px 14px; }
  .float-card { padding: 9px 12px 9px 9px; gap: 9px; border-radius: 14px; }
  .float-card .fc-icon { width: 34px; height: 34px; border-radius: 10px; }
  .float-card b { font-size: .8rem; }
  .float-card small { font-size: .7rem; }
  .float-card--b { width: 160px; padding: 10px 12px; }
  .float-card--c { left: 0; }
  .spark { height: 34px; }
  .brand-name { font-size: .98rem; }
  .hero-badge { padding: 6px 12px; font-size: .78rem; }
  .hero-badge b { display: none; }
  .media-stack .ms-badge { left: 12px; bottom: 12px; max-width: 220px; padding: 10px 12px; }
  .media-stack .ms-small { display: none; }
  .brand-name small { display: none; }
  .brand img { width: auto; height: 40px; }
  .grid-4, .team-grid { gap: 12px; }
  .mini-feature { padding: 14px; }
  .faq-trigger { padding: 18px 16px; }
  .faq-panel p { padding: 0 16px 18px; }
  .marquee-track { gap: 12px; }
  .logo-pill { width: 160px; height: 62px; }
  .logo-pill img { width: 130px; height: 40px; }
  .cta-band { padding: 32px 22px; border-radius: var(--radius-lg); }
  .form-card { padding: 22px 18px; border-radius: var(--radius-lg); }
  .overlay-card .oc-body { padding: 20px; }
  .chip-row .chip { font-size: .78rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .wa-float, .to-top, .mobile-nav, .footer-wordmark, .orb, .bg-grid, .bg-dots { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}