/* ============================================================
   RESPONSIVE — intentional mobile recomposition, not shrinkage.
   Breakpoints tested: 1440 / 1280 / 1024 / 768 / 390 / 375.
   Component-local breakpoints already live beside their rules in
   components.css / layout.css; this file holds cross-cutting
   recomposition that changes what a section IS on small screens,
   not just how big it is.
   ============================================================ */

/* ---------- pillars: four distinct chapters, not a stacked list ----------
   Spacing + oversized numbering carry the rhythm. No extra motion is
   introduced here — the reveal/in-view systems already in components.css
   still drive it. */
@media (max-width:640px){
  .svc-row{ grid-template-columns:1fr; padding:46px 0 40px; }
  .svc-row:first-child{ padding-top:10px; }
  .svc-row:last-child{ padding-bottom:48px; }
  .svc-num{ font-size:38px; font-weight:500; line-height:1; padding-top:0; margin-bottom:14px; display:block; }
  .svc-num::before{ font-size:12px; vertical-align:middle; }
  .svc-num::after{ display:inline; }
  .svc-name{ max-width:22ch; }
  .svc-desc{ max-width:36ch; }
}

/* ---------- services page: same oversized chapter mark as the homepage
   pillars, standing in for the col-idx kicker once the rail loses its
   visual weight at this width ---------- */
@media (max-width:640px){
  #accounting .kicker, #grants .kicker, #automation .kicker, #digital .kicker{ display:none; }
  .svc-chapter{
    display:block;
    font-family:var(--font-mono);
    font-size:38px;
    font-weight:500;
    line-height:1;
    color:var(--c-gold);
    margin-bottom:10px;
  }
  .svc-chapter::before{ content:'+'; opacity:1; font-size:12px; vertical-align:middle; margin-right:6px; }
  .svc-chapter::after{ content:attr(data-of); opacity:.35; font-size:.6em; margin-left:6px; }
}

/* ---------- page-hero strip: the label is set in the SVG's own coordinate
   space, so it shrinks with the strip's viewBox scale-down on narrow
   screens (readable at desktop widths, illegible by ~390px). Scale the
   SVG font-size up to compensate rather than fighting the viewBox. ---------- */
@media (max-width:640px){
  .hs-label{ font-size:34px; }
}

/* ---------- hero: recomposed, not shrunk ---------- */
@media (max-width:767px){
  .hero{ padding-top:28px; }
  .hero-grid{ padding-top:36px; }
  .hero h1{ max-width:11ch; }
}

/* ---------- founder: single column earlier than the generic 860px cut,
   so the quote never feels cramped against the body copy ---------- */
@media (max-width:900px){
  .founder-grid{ display:block; }
  .founder-grid > *:not(:first-child){ margin-top:22px; }
}

/* ---------- workshop build-strip: allow a touch-scroll hint ---------- */
@media (max-width:640px){
  .build-strip{ margin-left:calc(var(--shell-pad-mobile) * -1); margin-right:calc(var(--shell-pad-mobile) * -1); padding-left:var(--shell-pad-mobile); padding-right:var(--shell-pad-mobile); }
}

/* ---------- how-we-work / situations: keep the number column narrower ---------- */
@media (max-width:480px){
  .how-row, .situation{ grid-template-columns:28px 1fr; gap:6px; }
}

/* ---------- generous tap targets on touch ---------- */
@media (max-width:640px){
  .learn, .btn-text{ padding:6px 0; }
}