/* Remqa: mobile and tablet layer. Loaded after page styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(43,89,255,.12);overflow-x:hidden}
img{max-width:100%;height:auto}
.node span{display:block;line-height:1.45}
.cta-short{display:none}

/* menu button + mobile panel (hidden on desktop) */
.nav-toggle{display:none}
.mnav{display:none}

/* tables inside articles scroll sideways instead of stretching the page */
.prose .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 26px;border:1px solid var(--line);border-radius:12px;background:#fff}
.prose .tscroll table{margin:0;border:0;border-radius:0;min-width:520px}
.art-grid{grid-template-columns:minmax(0,1fr) 300px}

/* ---------- tablet and below ---------- */
@media (max-width:980px){
  .nav-in{gap:10px}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
  .nav-toggle svg{width:20px;height:20px}
  .nav-toggle .x{display:none}
  .nav-toggle[aria-expanded="true"] .x{display:block}
  .nav-toggle[aria-expanded="true"] .bars{display:none}
  .mnav{position:fixed;left:0;right:0;top:68px;bottom:0;z-index:30;background:var(--bg);padding:8px 24px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
  .mnav.open{display:block}
  .mnav a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:10px 2px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--line)}
  .mnav a::after{content:"\2192";font-family:var(--mono);color:var(--accent);font-size:15px}
  .mnav .sub a{min-height:46px;font-size:16px;font-weight:500;color:var(--ink-2);padding-left:18px}
  .mnav .btn{display:flex;justify-content:center;margin-top:22px;width:100%;border:0;color:#fff;min-height:52px}
  .mnav .btn::after{content:none}
  .mnav .mail{display:block;text-align:center;margin-top:16px;min-height:0;font-size:14.5px;font-weight:500;color:var(--muted);border:0}
  .mnav .mail::after{content:none}
  body.menu-open{overflow:hidden}

  /* tablet grids: use the width instead of one long column */
  .build-grid{grid-template-columns:repeat(2,1fr)}
  .prob-grid{grid-template-columns:repeat(3,1fr)}
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .side{grid-template-columns:1fr 1fr;align-items:start}
  .hero-grid{gap:40px;grid-template-columns:minmax(0,1fr)}
  .hero-grid > *,.sw > *,.founder > *,.contact > *,.band > *{min-width:0}
  .logo{padding:7px 0}
  .hero .flow,.hero .flow-cap{max-width:640px}
  .founder{gap:32px}
  .portrait{max-width:340px}
  .contact{gap:32px}
  .page-hero{padding:48px 0 28px}
  .answer{max-width:none}

  /* bigger tap targets */
  summary{min-height:44px;align-items:center}
  details{padding:12px 0}
  .side-card ul a{display:block;padding:7px 0}
  .build h3 a{display:inline-block;padding:4px 0}
  .person a,.founder a{display:inline-block;padding:8px 0}
  .foot-cols ul a{display:inline-block;padding:5px 0}
  .crumbs a{display:inline-block;padding:6px 0}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:56px 0}
  .sec-head{margin-bottom:28px}
  .sec-head p{font-size:16.5px}
  .lead{font-size:17px}
  .nav-in{height:64px}
  .mnav{top:64px;padding:4px 20px 40px}
  .nav-cta{padding:10px 14px;font-size:14px}
  .cta-long{display:none}
  .cta-short{display:inline}
  .logo{font-size:19px}

  /* hero */
  .hero{padding:36px 0 48px}
  .tagline{font-size:13.5px;line-height:1.5}
  .hero-ctas,.page-hero .cta-row{flex-direction:column;gap:10px}
  .hero-ctas .btn,.page-hero .cta-row .btn{width:100%;justify-content:center}
  .flow-top{padding:12px 14px}
  .flow-top > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0 10px}
  .flow-body{padding:14px}
  .node{padding:11px 12px}
  .flow-foot{padding:10px 14px;gap:6px 14px}
  .flow-cap{text-align:left}

  /* grids to one column */
  .build-grid,.prob-grid,.post-grid,.side{grid-template-columns:1fr}
  .build,.step,.prin,.prob{padding:20px}
  .industries{gap:6px}
  .industries .lbl{width:100%;margin-bottom:4px}
  .industries .btn{width:100%;justify-content:center;margin:0 0 8px!important}
  .chip{font-size:13px;padding:6px 10px}
  .sw{gap:28px}

  /* team */
  .founder{margin-bottom:40px}
  .portrait{max-width:260px;aspect-ratio:1/1}
  .creds{gap:8px}
  .person{padding:20px;gap:16px}
  .person img{width:112px;height:112px}
  .person h4{font-size:22px}

  /* bands and contact */
  .band{padding:24px 20px;border-radius:16px;gap:24px}
  .band h2{font-size:26px}
  .band .btn{width:100%;justify-content:center}
  .tl{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px}
  .tl b{min-width:0}
  .book-card{padding:22px 18px}
  .book-card .btn{width:100%;justify-content:center}

  /* subpages */
  .page-hero{padding:32px 0 20px}
  .page-hero h1{margin:12px 0 14px}
  .crumbs{font-size:12px;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .answer{padding:18px 18px 16px;border-radius:12px}
  .answer p{font-size:16.5px}
  .answer ul{font-size:15px}
  .prose{font-size:17px}
  .prose h2{margin:36px 0 12px}
  .prose ul,.prose ol{margin-left:18px}
  .prose .callout{padding:16px 16px}
  .svc-list div{padding:14px;font-size:15.5px}
  .post-card{padding:20px}
  .faq summary{font-size:16.5px}

  /* footer */
  .site-foot{padding-top:36px}
  .foot-cols{gap:24px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:380px){
  .wrap{padding:0 16px}
  .nav-cta{padding:9px 11px;font-size:13.5px}
  .nav-toggle{width:42px;height:42px}
  h1{font-size:34px}
}