/* Screw & Key — mobile hardening (v6) */

/* 1. Fluid images everywhere (except fixed-size gallery handled by its own CSS) */
img{max-width:100%;height:auto}
.sk-shot img{max-width:none;height:320px}         /* gallery keeps fixed slot */
@media(max-width:640px){.sk-shot,.sk-shot img{width:190px;height:250px}}

/* 2. Never allow horizontal scroll */
html,body{overflow-x:hidden}
.wrap,section,footer{max-width:100%}

/* 3. Fluid hero type — scales from phone to desktop */
.hero h1{font-size:clamp(2rem,6vw,3.75rem);line-height:1.05;overflow-wrap:break-word}
.hero .sub{font-size:clamp(1rem,2.5vw,1.25rem)}

/* 4. Tap targets >= 44px on touch devices */
a,button,.btn,input[type="submit"],.service-link{font-size:1rem}
@media (pointer:coarse){
  .btn,.btn-primary,.btn-ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  nav a,.service-link,.chip{min-height:44px}
}

/* 5. Hero actions stack full-width on small phones */
@media(max-width:480px){
  .hero-actions{display:flex;flex-direction:column;gap:12px}
  .hero-actions .btn{width:100%;text-align:center}
  .hero-form-card{padding:20px}
}

/* 6. Prevent iOS auto-zoom on form focus (16px+ inputs) */
input,select,textarea{font-size:16px !important}

/* 7. Services grid already collapses; keep cards readable */
@media(max-width:640px){
  .service-card{padding:22px 18px}
  .service-card h3{font-size:1.25rem}
  .sk-stats-inner{grid-template-columns:repeat(2,1fr) !important;gap:18px}
  .sk-stat .num{font-size:1.9rem}
}

/* 8. Tables/iframes safety */
table{display:block;max-width:100%;overflow-x:auto}
iframe{max-width:100%}

/* ===== v6.1 — gallery rebuild + image-fit fix + shorter pages ===== */

/* A. IMAGES ALWAYS FIT: allow shrink inside flex/grid, cap at container */
body *{min-width:0}
img,video{max-width:100%}
img{height:auto}
.hero-bg{background-size:cover !important;background-position:center !important}

/* C. SHORTER, TO-THE-POINT PAGES on phones */
@media(max-width:768px){
  section{padding:44px 0 !important}
  .hero{padding:36px 0 44px !important}
  .hero h1{margin-bottom:14px}
  .section-head{margin-bottom:24px !important}
  .section-head h2,h2{font-size:1.55rem !important}
  .section-head p{font-size:1rem !important}
  .service-icon{display:none}
  .service-card{padding:18px 16px}
  .service-card ul li{padding:7px 0 !important}
  .sk-stats{padding:24px 0 !important}
  .sk-stats-inner{gap:14px !important}
  .sk-stat .num{font-size:1.7rem !important}
  .hero-form-card{padding:18px}
  footer{padding-bottom:80px}
}
/* D. Topbar nav: swipeable instead of wrapping on tiny screens */
@media(max-width:640px){
  .topbar nav,.nav-links{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar,.nav-links::-webkit-scrollbar{display:none}
}

/* ===== v6.2 — service photo icons + tighter pages ===== */
.service-thumb{width:104px;height:104px;object-fit:cover;border-radius:12px;
  display:block;margin:0 auto 12px;border:1px solid rgba(255,255,255,.08)}
.service-card:hover .service-thumb{filter:brightness(1.08)}
@media(max-width:768px){
  section{padding:36px 0 !important}
  .hero{padding:28px 0 36px !important}
  .service-thumb{width:84px;height:84px;margin-bottom:8px}
  .service-num{margin-bottom:6px}
  .sk-stats{padding:18px 0 !important}
}

/* ===== v6.4 — organized topbar ===== */
.topbar-inner{gap:20px;padding:12px 20px;flex-wrap:nowrap}
.brand{font-size:19px;white-space:nowrap;flex:none}
.nav-links{display:flex !important;gap:24px;flex-wrap:nowrap;align-items:center}
.nav-links a{white-space:nowrap;font-size:13.5px;line-height:1;flex:none}
.topbar-actions{gap:8px;flex-wrap:nowrap;flex:none}
.topbar-actions .topbar-text{display:none !important}
.topbar-cta{white-space:nowrap;padding:9px 16px;font-size:13px;border-radius:6px;flex:none}
@media(max-width:980px){
  .topbar-inner{overflow:hidden}
  .nav-links{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .nav-links::-webkit-scrollbar{display:none}
}
@media(max-width:560px){
  .brand{font-size:16px}
  .brand-logo{width:28px;height:28px}
  .nav-links a{font-size:12.5px}
  .topbar-cta{font-size:11.5px;padding:8px 11px;gap:5px}
}