/* Adamas Digital — mobile refinements.
   Loaded after site.css, which is a byte-for-byte copy of the reference
   build. Every rule here is scoped to handset widths, so the desktop layout
   the reference defines is never touched. */

@media (max-width: 1024px) {
  /* The hamburger was a bare 24px icon: the smallest control on the page and
     well under any touch-target guideline. The negative margin absorbs the
     new size so header height and alignment are unchanged. */
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }

  /* .site-header carries backdrop-filter, which per spec makes it the
     containing block for its fixed-position descendants. So the panel's
     inset:0 resolved against the 84px header bar rather than the viewport:
     the menu opened 84px tall, covered nothing, and its links spilled over
     the hero. Anchor it to the full screen instead — the header sits at the
     viewport origin, so top/left are already right and only height is wrong.
     Six oversized links also overrun a short handset, hence the scroll. */
  .mobile-menu {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 720px) {
  /* ---- Hero ---------------------------------------------------------
     The stage sat in a -5vw right margin, so main{overflow:clip} sliced the
     "BRAND / DEMAND / GROWTH" caption and the ACTIVE chip mid-word. Pull the
     whole composition back inside the gutter; the tilt still reads. */
  .hero-stage { width: min(78vw, 310px); margin-right: 0; }
  .hero-signal { right: 0; width: 148px; }
  /* On a narrow card the disc covered the tail of the caption, so it read as
     "BRAND / DEMAND / G". Smaller disc, tighter caption, no collision. */
  .hero-disc { right: 0; width: 40%; }
  .hero-logo-card:after { left: 24px; bottom: 24px; letter-spacing: .12em; }

  /* ---- Services -----------------------------------------------------
     Column three is 22px wide but the arrow renders at 24px, so every row
     overflowed its own box by 2px. */
  .service-row svg { width: 22px; height: 22px; }

  /* ---- Growth engine ------------------------------------------------
     The track was an 800px horizontal scroller inside a 350px box: stage
     three onwards sat off-screen and the visible edge cut words in half, so
     it read as broken rather than scrollable. Turn the timeline upright —
     all five stages are readable with no swipe, and the node-on-a-line
     motif survives because engine-node's ring masks the rule behind it. */
  .engine-track {
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
    margin-top: 50px;
  }
  .engine-track:before {
    top: 6px;
    bottom: 38px;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .engine-track article {
    display: grid;
    grid-template-columns: 13px 1fr;
    column-gap: 20px;
    padding: 0 0 34px;
  }
  .engine-track article > span { grid-area: 1 / 2; }
  .engine-track .engine-node { grid-area: 1 / 1 / 4 / 2; align-self: start; margin: 5px 0 0; }
  .engine-track article h3 { grid-area: 2 / 2; }
  .engine-track article p { grid-area: 3 / 2; max-width: none; margin-top: 8px; }

  /* ---- Touch targets ------------------------------------------------
     Filter chips sat at 34px, inline text links at 27px and the footer
     lists at 19px and 14px — the hardest things on the page to hit. */
  .portfolio-filter button,
  .category-filter button { padding: 14px 16px; }

  /* Padding goes on top so the link keeps its tight underline; margin-top
     gives the same amount back so vertical rhythm is unchanged. */
  .text-link { margin-top: 24px; padding-top: 17px; }

  .site-header .brand-mark,
  .footer-lead .brand-mark,
  .home-contact-intro > .brand-mark { padding: 8px 0; }

  .footer-links > div { gap: 0; }
  .footer-links a { padding: 12px 0; }
  .footer-bottom > div { gap: 0 24px; }
  .footer-bottom > div a { padding: 13px 0; }

  /* ---- Contact ------------------------------------------------------
     "India" and "Working worldwide" sat flush against each other. */
  .contact-map strong { margin-top: 5px; }
}