/* ---- Mobile refinements ---- */
.work-progress{display:none}
.pay-bg{display:none}
@media (max-width: 640px){
  /* Nav: hide the quote button (it's repeated lower on every page) */
  .nav-quote{display:none !important}
  header nav[aria-label="Main"]{gap:0 !important;margin-left:-8px}
  header nav[aria-label="Main"] > a, header nav[aria-label="Main"] > span > a{padding:0 8px !important}
  #nav-toggle{width:26px !important}
  .range-grid img{aspect-ratio:4 / 5 !important}

  /* Recent work: swipeable carousel */
  .work-section{padding-top:80px !important}
  .work-grid{display:flex !important;gap:10px !important;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -20px;padding:0 20px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .work-grid::-webkit-scrollbar{display:none}
  .work-grid img{flex:0 0 80%;width:80% !important;margin-top:0 !important;scroll-snap-align:start}
  .work-progress{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.04em}
  .work-progress .bar{flex:1;height:2px;background:#e1e1e1;position:relative;overflow:hidden}
  .work-progress .fill{position:absolute;left:0;top:0;bottom:0;background:#000;width:12.5%;transition:transform .2s ease}

  /* Footer: stacked logo, full width */
  .footer-logo{padding:40px 20px 28px !important}
  .footer-logo img{width:100% !important}

  /* Product range: 2 across, compact labels */
  .range-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 12px !important;margin-top:40px !important}
  .range-grid > a{gap:10px !important}
  .range-grid > a > span{flex-direction:column !important;gap:2px !important;padding-top:10px !important;font-size:15px !important;line-height:1.25}
  .range-grid > a > span > span:last-child{font-size:13px}

  /* Shade now & pay later: photo card */
  .pay-section{padding-top:88px !important}
  .pay-card{display:flex !important;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
    min-height:470px;border:0 !important;color:#fff;background:#000}
  .pay-card .pay-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
  .pay-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 70%)}
  .pay-card > h2{flex:0 0 auto !important;position:relative;z-index:1;padding:28px 22px 0 !important;font-size:46px !important;line-height:.9 !important}
  .pay-card > div{flex:0 0 auto !important;position:relative;z-index:1;border-left:0 !important;background:#fff;color:#000;margin:0 14px 14px;padding:18px 18px 20px !important;gap:12px !important;justify-content:flex-start !important}
  .pay-card img:not(.pay-bg){height:28px !important}
  .pay-card p{font-size:20px !important;line-height:1.1 !important}
}