/* ==========================================================================
   TECHIE ZEST — RESPONSIVE
   Deliberate breakpoints: 1280 / 1024 / 768 / 390 / 375. Mobile is designed,
   not merely shrunk. Load LAST so these overrides win.
   ========================================================================== */

/* ---- Header + logo sizing per breakpoint ----------------------------
   Logo is the header's visual anchor; nav/CTA sizes are left untouched.
   Desktop (>1024): logo 96px / header 108px (set in tokens.css).          */
@media (max-width: 1024px) {          /* tablet: 1024 & 768 */
  :root { --header-h: 96px; --logo-h: 80px; }
}
@media (max-width: 480px) {           /* mobile: 390 & 375 */
  :root { --header-h: 86px; --logo-h: 66px; }
}

/* ---- <= 1024px ------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Reset start lines FIRST, then set spans, so the two never conflict. */
  .start-2, .start-3, .start-6, .start-7, .start-8, .start-9 { grid-column-start: auto; }
  .col-3 { grid-column: auto / span 6; }
  .col-4 { grid-column: auto / span 6; }
  .col-5, .col-7 { grid-column: auto / span 12; }
  .col-6 { grid-column: auto / span 12; }
  .col-8, .col-9, .col-10 { grid-column: auto / span 12; }

  .svc-grid { grid-template-columns: repeat(2, 1fr); }   /* tablet: 2 columns */

  .work-featured { grid-template-columns: 1fr; }
  .about-preview { grid-template-columns: 1fr; }
  .insights__grid { grid-template-columns: 1fr; }

  .section-head--between { flex-direction: column; align-items: flex-start; }
}

/* ---- <= 900px -------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Visual stacks BELOW the headline + CTAs; kept large enough to read. */
  .hero__visual { max-width: 460px; margin: var(--space-lg) auto 0; }
  .hero h1, .hero__lead { max-width: none; }

  .principles { grid-template-columns: 1fr 1fr; }
  .positioning .grid { gap: var(--space-lg); }
}

@media (max-width: 420px) {
  .tz-chip { font-size: 0.66rem; padding: 0.42em 0.6em; }
  .tz-chip--a4 { right: 0; }
}

/* ---- <= 768px -------------------------------------------------------- */
@media (max-width: 768px) {
  .proof { grid-template-columns: 1fr; gap: var(--space-lg); }
  .proof__item { display: flex; align-items: baseline; gap: var(--space-md); }
  .proof__num { font-size: var(--step-4); }

  /* AI flow becomes a vertical pipeline */
  .ai-flow__body { grid-template-columns: 1fr; }
  .ai-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-step:last-child { border-bottom: 0; }
  /* chevron connector points down between stacked steps */
  .ai-step:not(:last-child)::after { top: auto; bottom: -7px; right: 50%; transform: translateX(50%) rotate(135deg); }

  /* Process becomes vertical with a left rail */
  .process__track { grid-template-columns: 1fr; gap: var(--space-lg); padding-left: var(--space-lg); }
  .process__line { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .process__line-fill { left: 11px; right: auto; top: 0; width: 2px !important; height: 0; background: linear-gradient(180deg, var(--navy), var(--emerald)); }
  .process[data-inview="true"] .process__line-fill { height: 100%; }
  .process-step { padding-left: var(--space-lg); }
  .process-step__dot { position: absolute; left: calc(-1 * var(--space-lg)); top: 0; }

  .work-secondary { grid-template-columns: 1fr; }
}

/* ---- <= 480px -------------------------------------------------------- */
@media (max-width: 480px) {
  .principles { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }              /* mobile: 1 column  */
  .svc-cta { flex-direction: column; }
  .svc-cta .btn { width: 100%; }
  .about-preview__facts { grid-template-columns: 1fr; gap: var(--space-sm); }
  .about-preview__facts li { display: flex; align-items: baseline; gap: var(--space-sm); }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; }
  .work-cs li { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* ---- very narrow safety (375/390) ------------------------------------ */
@media (max-width: 400px) {
  :root { --gutter: 1.15rem; }
  .mobile-nav__link { font-size: var(--step-1); }
}