/* ===== MOBILE: grids + touch interactivity ===== */
input,select,textarea{font-size:16px} /* stops iPhone auto-zoom on focus */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(4);opacity:0}}
@keyframes stgIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
.stg{opacity:0}
.stg.in2{opacity:1;animation:stgIn .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
@media(hover:none){
  .card:hover,.pack:hover,.bento div:hover{transform:none;box-shadow:none}
  .grid figure:hover img{transform:none}
}
@media(max-width:860px){
  *{-webkit-tap-highlight-color:transparent}
  .card,.pack,.bento div,.steps li,.vid,.grid figure,.facts li,.skills span,.faq details{transition:transform .18s,border-color .3s,background .3s}
  .card:active,.pack:active,.bento div:active,.steps li:active,.vid:active,.grid figure:active,.facts li:active,.skills span:active{transform:scale(.96)}
  .btn:active{transform:scale(.95)}

  /* ---- everything in grids instead of one long stack ---- */
  .cards,.bento,.steps,.videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{padding:16px;border-radius:18px}
  .card .ic{font-size:1.6rem}
  .card h4{font-size:1rem}
  .card p{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .card.open p{display:block;-webkit-line-clamp:unset}
  .card.svc:not(.open)::after,.card.open::after{content:"";}
  .svc .price{font-size:1.05rem}
  .card .btn.small{width:100%;text-align:center;padding:8px 10px;font-size:.76rem}
  .bento div{padding:16px;border-radius:18px}
  .bento b{font-size:1.35rem}
  .bento span{font-size:.64rem}
  .steps li{padding:14px;font-size:.82rem}
  .steps li::before{font-size:1.4rem}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .facts li{border-radius:14px;text-align:center;padding:10px 8px;font-size:.78rem}
  .skills span{padding:7px 14px;font-size:.78rem}
  .grid{columns:2;column-gap:10px}
  .grid figure{margin-bottom:10px;border-radius:14px}
  .grid figcaption{opacity:1;font-size:.66rem;padding:20px 9px 7px}
  .vid{border-radius:14px}

  /* swipeable rows */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-5%;padding:0 5% 6px}
  .filters::-webkit-scrollbar,.packs::-webkit-scrollbar{display:none}
  .filters button{flex:none;padding:8px 18px}
  .packs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin-inline:-5%;padding:8px 5% 16px}
  .pack{flex:0 0 76%;scroll-snap-align:center}

  /* reviews */
  .slide{padding:28px 18px}
  .slide p{font-size:1.08rem}
  .slider{touch-action:pan-y}

  /* faq + timeline a bit tighter */
  .faq details{padding:14px 16px;border-radius:14px}
  .timeline{padding-inline-start:20px}

  /* contact form: pairs of fields side by side */
  #form{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #form select,#form textarea,#form button{grid-column:1/-1}
  #form input,#form select,#form textarea{padding:13px 14px}
  .contact{gap:24px}
  h2{font-size:clamp(1.7rem,7vw,2.4rem)}

  /* small popup: compact, above the bottom bar, never covering the form */
  .nudge{bottom:84px;inset-inline:12px;max-width:none;padding:12px 16px}
  .nudge p{display:none}
  .nudge b{font-size:.95rem}
  .totop{inset-inline-start:auto;inset-inline-end:14px;bottom:150px}
}
/* ===== MOBILE: colour picker ===== */
#palBtn,#palPanel{display:none}
@media(max-width:980px){
  #palBtn{display:inline-block;font-size:.95rem;padding:0}
  #palPanel{position:fixed;top:60px;inset-inline-end:4%;z-index:70;display:flex;flex-wrap:wrap;gap:12px;max-width:236px;padding:14px;border-radius:20px;background:var(--bg2,#0b1220);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transition:.25s}
  #palPanel.on{opacity:1;visibility:visible;transform:none}
  #palPanel b{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s}
  #palPanel b.on{border-color:var(--text);transform:scale(1.12)}
  #palPanel b:active{transform:scale(.9)}
}