/* === Kairos Mobile Optimization CSS (drop-in) === */

/* Base Typography & Sizing */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #111;
  background: #fff;
  text-rendering: optimizeLegibility;
}
@media (min-width:480px){ body { font-size: 17px; } }
@media (min-width:1024px){ body { font-size: 18px; } }

/* Headings */
h1 { font-size: clamp(24px, 6vw, 36px); line-height: 1.25; margin: 24px 0 8px; }
h2 { font-size: clamp(18px, 3.8vw, 24px); line-height: 1.3;  margin: 20px 0 8px; }
h3 { font-size: clamp(16px, 3.2vw, 20px); line-height: 1.35; margin: 16px 0 6px; }
p, ul, ol { margin: 8px 0; }
ul, ol { padding-left: 20px; }

/* Container */
.wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 64px; }
@media (min-width:768px){ .wrap { padding: 32px 16px 72px; } }

/* Responsive Grid (affects existing .grid from service pages) */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width:768px){ .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:1120px){ .grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Hero and Cards */
.hero { background:#f7f7f8; padding: 20px 16px; border-radius: 12px; }
@media (min-width:768px){ .hero { padding: 28px 20px; } }
.box  { border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; }

/* Images */
img { max-width: 100%; height: auto; display: block; }
img[width][height] { height: auto; }
img.lazy, img[loading="lazy"] { content-visibility: auto; }

/* Links and Buttons (touch targets >= 44px) */
a { color: inherit; }
.cta a,
a.button, .btn, button, input[type="submit"] {
  display: inline-block;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid #111;
  text-decoration: none;
}
@media (hover:hover){ .cta a:hover, a.button:hover, .btn:hover { transform: translateY(-1px); } }
.cta { margin-top: 20px; }

/* Footer service links */
.footer-services { margin-top: 8px; font-size: 14px; color:#555; }
.footer-services a { text-decoration: none; }
.footer-services a + a::before { content: " · "; color:#999; margin: 0 4px; }

/* Accessibility */
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* Small phones fix */
@media (max-width:360px){
  .cta a, a.button, .btn { padding-left: 14px; padding-right: 14px; }
}

/* Optional sticky bottom CTA: add class .sticky-cta to your CTA container */
@media (max-width:768px){
  .sticky-cta { position: sticky; bottom: 0; background: #fff; padding: 12px 0; border-top: 1px solid #eee; }
}