/* Phone optimisation (pro skin). Loaded after pro.css. Everything here is <=699px only. */
@media (max-width:699px){
  /* Rhythm: tighter sections */
  .sec{ padding:56px 0 }
  .sec-head, .sec-head.split{ margin-bottom:26px; gap:10px }
  .sec-head h2{ font-size:clamp(34px, 9.6vw, 44px) }
  .sec-head p{ font-size:16px }

  /* Readable minimums */
  .tag, .tag.plain{ font-size:12px; padding:5px 8px }
  .ls-where{ font-size:12px }
  .tech .role{ font-size:12.5px }
  .cdl dt{ font-size:12px }
  .kicker{ font-size:12.5px }

  /* Tap targets >= 44px */
  .top-call{ min-height:44px; display:inline-flex; align-items:center }
  .marq-toggle{ min-height:44px; min-width:64px; font-size:12px }
  .cdl dd a{ display:inline-block; padding:11px 0; margin:-11px 0 }
  .foot nav{ gap:0 18px } .foot nav a{ display:inline-flex; align-items:center; min-height:44px }

  /* Swipe rows: problem cards and reviews */
  .swipe{ display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:86%; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut);
    margin:0 calc(-1 * var(--gut)); padding:4px var(--gut) 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .swipe::-webkit-scrollbar{ display:none }
  .swipe > *{ scroll-snap-align:start; min-width:0 }
  .cards.swipe .card{ min-height:0; height:100% }
  .cards.swipe .card.has-bg{ min-height:360px }
  .revs.swipe{ columns:auto; grid-auto-columns:84% }
  .revs.swipe .rev{ margin:0; height:100% }
  .dots{ display:flex; justify-content:center; gap:8px; margin-top:14px }
  .dots button{ width:24px; height:24px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer }
  .dots button::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rule); transition:width .25s, background .25s }
  .dots button[aria-current="true"]::before{ width:22px; border-radius:4px; background:var(--ink) }
  .swipe-hint{ display:block; text-align:center; margin-top:-14px; margin-bottom:16px; font:600 13px var(--sans); color:var(--ink-2) }
  .also{ margin-top:16px; font-size:15px }

  /* Safe or urgent: compact */
  .split2 > div{ padding:22px }
  .split2 h3{ font-size:24px }
  .split2 ul{ margin:12px 0 16px }
  .split2 li{ padding:9px 0; font-size:15.5px }
  .split2 .btn{ width:100% }

  /* Steps: vertical timeline */
  .steps{ gap:0 }
  .steps li{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; border-top:0; padding:0 0 22px; position:relative }
  .steps li::before{ grid-row:1 / span 2; width:44px; height:44px; margin:0; font-size:18px; box-shadow:none }
  .steps li:not(:last-child)::after{ content:""; position:absolute; left:21px; top:48px; bottom:4px; border-left:2px dashed var(--rule) }
  .steps b{ font-size:18px; align-self:center }
  .steps span{ margin-top:4px; font-size:15.5px }

  /* Team: compact rows */
  .team{ gap:10px }
  .tech.photo{ display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center }
  .tech.photo img{ width:92px; height:92px; aspect-ratio:1 }
  .tech.photo div{ padding:12px 16px }
  .tech b{ font-size:19px }
  .tech .meta{ font-size:14.5px; margin-top:4px }
  .van{ margin-top:14px; font-size:15px; padding:14px }

  /* About: smaller collage, tighter copy */
  .about-pro{ gap:32px }
  .collage{ padding-bottom:28px; max-width:420px; margin:0 auto }
  .collage .big{ width:78% }
  .collage figcaption{ bottom:40px; font-size:12px }
  .about-text p{ font-size:16px }
  .owner-quote{ font-size:16.5px }

  /* Band + contact */
  .band{ padding:48px 0 }
  .band .ctas{ display:grid; grid-template-columns:1fr 1fr; gap:10px } .band .btn{ padding:0 12px }
  .contact-grid{ gap:22px }
  .cdl div{ grid-template-columns:84px minmax(0,1fr); gap:10px; padding:12px 0 }
  .cdl dd{ font-size:16px }
  .zip{ padding:20px; box-shadow:var(--shadow) }

  /* Hero band */
  .hp-band-in{ padding:20px; gap:18px }
  .hb-urgent b{ font-size:21px }
  .hb-urgent .btn, .hb-row .btn{ width:100% }
  .brands{ padding:30px 0 22px }
  .proof li{ padding:18px 12px 18px 0 } .proof li:nth-child(even){ padding-left:14px }
  .proof b{ font-size:34px }
}
@media (max-width:699px){ .ls-badge{ padding:5px 0; margin-top:-5px } .top.float .logo small{ font-size:11.5px } }
@media (max-width:699px){ .tech.photo{ align-items:stretch } .tech.photo img{ width:100%; height:100%; min-height:96px; object-fit:cover; object-position:50% 25% } .tech.photo div{ align-self:center } }