/* app-ui.css – professional icon treatment + app-like mobile layout for all public pages.
   Loaded AFTER each page's own <style>, so these rules refine them. */

/* ── icon tiles (services / why-us / contact / team) ───────────── */
.service-icon,.srv-icon,.why-icon,.whyus-icon,.info-icon,.team-avatar{display:inline-grid;place-items:center;line-height:1}
.service-icon,.srv-icon{width:56px;height:56px;border-radius:16px;font-size:1rem !important;margin-bottom:16px !important;
  background:color-mix(in srgb,var(--p) 12%,#fff);color:var(--p);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p) 18%,transparent)}
.whyus-icon,.why-icon{width:54px;height:54px;border-radius:15px;font-size:1rem !important;margin-bottom:14px !important;
  background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.about-grid .why-icon,.why-icon.on-light{background:color-mix(in srgb,var(--p) 12%,#fff);color:var(--p)}
.service-icon .ic,.srv-icon .ic,.whyus-icon .ic,.why-icon .ic,.info-icon .ic,.team-avatar .ic{vertical-align:0;width:1.6em;height:1.6em}
.service-icon .ic,.srv-icon .ic{width:28px;height:28px}
.whyus-icon .ic,.why-icon .ic{width:26px;height:26px}
.info-icon{color:#fff}
.info-icon .ic{width:20px;height:20px}
.team-avatar{color:#fff}
.team-avatar .ic{width:34px;height:34px}
.chk-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--p) 12%,#fff);color:var(--p);flex-shrink:0}
.chk-ic .ic{vertical-align:0}

/* hero badge / trust row / CTA */
.hero-badge{display:inline-flex !important;align-items:center;gap:8px}
.hero-badge .ic{vertical-align:0}
.trust-item .check,.trust-item .ck{display:inline-grid;place-items:center}
.trust-item .ic{vertical-align:0}
.cta-primary,.cta-btn,.cf-btn,.u-hdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.cta-primary .ic,.cta-secondary .ic,.cta-btn .ic,.cf-btn .ic{vertical-align:0}
.cta-primary{box-shadow:0 0 0 2px rgba(255,255,255,.28),0 10px 30px rgba(0,0,0,.3)}
.stars{display:flex;gap:3px;align-items:center}
.stars .ic{vertical-align:0}
.admin-bar .ic{vertical-align:-.15em}
.il-title{display:inline-flex;align-items:center;gap:8px}
.il-title .ic{vertical-align:0}
button .ic,a .ic{pointer-events:none}
.cf-btn,.eq-submit,[onclick*="submit"]{gap:8px}

/* ── app-like phone layout ─────────────────────────────────────── */
@media (max-width:768px){
  body{background:#F1F5F9}
  section,.section{scroll-margin-top:70px}
  .section{padding-top:38px !important;padding-bottom:38px !important}
  .section-title{font-size:1.65rem !important;line-height:1.2}
  .section-label{font-size:.7rem}

  /* hero – more compact, thumb-friendly */
  .hero{padding:34px 18px 40px !important;border-radius:0 0 26px 26px}
  .hero h1{font-size:2.15rem !important;line-height:1.08 !important}
  .hero-cta-group{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .cta-primary,.cta-secondary{width:100%;padding:16px 18px !important;border-radius:16px !important;font-size:1rem !important;text-align:center}
  .hero-trust{display:grid !important;grid-template-columns:1fr 1fr;gap:10px 8px;justify-items:start;margin-top:22px}
  .trust-item{font-size:.8rem !important}

  /* cards as app tiles */
  .services-grid,.srv-grid{grid-template-columns:1fr 1fr !important;gap:12px !important;margin-top:24px !important}
  .service-card,.srv-card{padding:16px 14px !important;border-radius:18px !important;box-shadow:0 2px 10px rgba(15,23,42,.06) !important;border:1px solid #E8EDF3 !important}
  .service-card h3,.srv-card h3{font-size:.95rem !important;margin-bottom:6px}
  .service-card p,.srv-card p{font-size:.78rem !important;line-height:1.5 !important}
  .service-icon,.srv-icon{width:46px;height:46px;border-radius:14px;margin-bottom:12px !important}
  .service-icon .ic,.srv-icon .ic{width:24px;height:24px}

  .whyus-grid,.why-grid{grid-template-columns:1fr 1fr !important;gap:12px !important;margin-top:24px !important}
  .whyus-card,.why-card{padding:16px 14px !important;border-radius:18px !important}
  .whyus-card h3,.why-card h3{font-size:.92rem !important}
  .whyus-card p,.why-card p{font-size:.78rem !important}

  /* reviews: swipeable carousel */
  .testimonials-grid,.test-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px !important;margin:24px -16px 0 !important;padding:2px 16px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .testimonials-grid::-webkit-scrollbar,.test-grid::-webkit-scrollbar{display:none}
  .testimonial-card,.test-card{flex:0 0 82%;scroll-snap-align:center;border-radius:18px !important;padding:20px !important}

  .section-inner,.sec-inner{padding-left:2px;padding-right:2px}
  .contact-grid,.about-grid{gap:14px !important}
  .info-card,.cf-card,.contact-card{border-radius:18px !important}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btn{justify-content:center;border-radius:16px !important}

  /* enquiry popup becomes a bottom sheet */
  #eq-overlay{align-items:flex-end !important;padding:0 !important}
  #eq-overlay>div{max-width:none !important;border-radius:24px 24px 0 0 !important;max-height:92vh;overflow-y:auto;animation:uSheet .28s ease-out !important}
  .admin-bar{display:none}
  input,select,textarea{font-size:16px !important}
}
@keyframes uSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* desktop polish */
@media (min-width:769px){
  .service-card,.srv-card,.whyus-card,.why-card,.testimonial-card,.test-card{transition:transform .2s,box-shadow .2s}
  .service-card:hover,.srv-card:hover{transform:translateY(-4px)}
}

/* hero colour equals the brand colour → keep the main call button readable */
.hero.is-brand .cta-primary{background:#fff;color:var(--p);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero.is-brand .hero-badge{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}