/* =====================================================
   IT Place Technology - Public Site Stylesheet
   Theme: logo blue (#1B75BC) on light/dark surfaces
   ===================================================== */
:root {
  --blue: #1B75BC;
  --blue-dark: #0F5A94;
  --blue-deep: #0A3D64;
  --blue-soft: #E8F2FB;
  --ink: #12212E;
  --ink-2: #43525F;
  --ink-3: #6B7A87;
  --line: #E3EAF0;
  --bg: #F6F9FC;
  --white: #FFFFFF;
  --amber: #F5A623;
  --green: #22B45E;
  --red: #E5484D;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(13, 47, 77, .08);
  --shadow-lg: 0 24px 60px rgba(13, 47, 77, .16);
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* the off-canvas mobile nav is parked fully off-screen; clip it so it can't
   stretch the page sideways (scrollX stays at 0, unlike overflow-x: hidden) */
body { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; color: var(--ink); }
.container { width: min(1180px, 92%); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--white); padding: 8px 14px; z-index: 999; border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: all .25s ease; line-height: 1;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(27,117,188,.35); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-2px); }
.btn-outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--blue-dark); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--blue-deep); }
.btn-outline-white { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--blue-dark); }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Topbar ---------- */
.topbar { background: var(--blue-deep); color: #cfe3f4; font-size: .82rem; }
.topbar-in { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 5px 0; }
.topbar-addr { display: inline-flex; align-items: center; gap: 6px; }

/* Call pill (icon + number) and WhatsApp icon in the top bar */
.topbar-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.topbar-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1; transition: transform .15s ease, box-shadow .15s ease; }
.topbar-chip:hover { transform: translateY(-1px); }
.topbar-chip.call { background: var(--blue); color: #fff; }
.topbar-chip.call:hover { box-shadow: 0 2px 8px rgba(37, 99, 235, .45); }
.topbar-chip.wa { background: #25D366; color: #fff; }
.topbar-chip.wa:hover { box-shadow: 0 2px 8px rgba(37, 211, 102, .5); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  /* NO backdrop-filter here: blur() makes this header the containing block for
     the fixed mobile drawer inside it - the drawer's top:0/100vh then resolve
     against the 64px header instead of the screen, shifting it down and pushing
     its bottom links (Cart / Get a Quote) below the screen edge. */
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 52px; height: 48px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-head); }
.brand-text strong { font-size: 1.25rem; font-weight: 800; color: var(--blue); letter-spacing: .5px; }
.brand-text small { font-size: .68rem; font-weight: 600; letter-spacing: 3.5px; color: var(--ink-2); }
.brand-text-light strong, .brand-text-light small { color: #fff; }
.brand-text-light small { color: #A9C6E0; }
.main-nav { display: flex; align-items: center; gap: 4px; }
/* drawer head + quick-call exist only on mobile (injected markup) - never on desktop */
.main-nav .drawer-head { display: none; }
.nav-call { display: none; }
.nav-link {
  font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  color: var(--ink-2); padding: 10px 16px; border-radius: 999px; transition: all .2s;
}
.nav-link:hover { color: var(--blue); background: var(--blue-soft); }
.nav-link.active { color: var(--blue); font-weight: 600; }
.btn-nav { margin-left: 10px; background: var(--blue); color: #fff !important; padding: 10px 20px; }
.btn-nav:hover { background: var(--blue-dark); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 3px; background: var(--blue); border-radius: 2px; transition: .3s; }

/* ---------- Hero slider ---------- */
.hero { position: relative; overflow: hidden; background: var(--blue-deep); }
.hero-slides { position: relative; }
.hero-slide { display: none; position: relative; }
.hero-slide.active { display: block; }
.hero-slide img { width: 100%; height: min(78vh, 680px); object-fit: cover; }
.hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,32,54,.88) 15%, rgba(6,32,54,.55) 45%, rgba(6,32,54,.18) 75%);
}
.hero-content {
  position: absolute; inset: 0; display: flex; align-items: center; z-index: 2;
}
.hero-text { max-width: 640px; color: #fff; padding: 40px 0; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  color: #DCEBFA; font-size: .8rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.hero-text h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.3rem); font-weight: 700; margin-bottom: 14px; }
.hero-text h1 .accent { color: #6FC1F5; }
.hero-text p { color: #D9E7F2; font-size: 1.06rem; margin-bottom: 26px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-nav {
  position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); border: 0; cursor: pointer; transition: .3s; }
.hero-dot.active { background: #fff; width: 28px; border-radius: 999px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; transition: .25s;
}
.hero-arrow:hover { background: var(--blue); }
.hero-arrow.prev { left: 18px; }
.hero-arrow.next { right: 18px; }

/* ---------- Section shells ---------- */
.section { padding: 84px 0; }
.section.alt { background: var(--bg); }
.section-head { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue);
  background: var(--blue-soft); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; margin-bottom: 12px; }
.section-head p { color: var(--ink-3); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: all .3s ease; position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.icon-badge {
  width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--blue); background: var(--blue-soft); margin-bottom: 18px;
  transition: .3s;
}
.card:hover .icon-badge { background: var(--blue); color: #fff; transform: scale(1.05) rotate(-4deg); }
.card h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; }
.card p { color: var(--ink-3); font-size: .93rem; }
.card .link-more { font-family: var(--font-head); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }

/* ---------- Service detail ---------- */
.svc {
  display: grid; grid-template-columns: 480px 1fr; gap: 44px; align-items: center;
  padding: 48px; border-radius: 20px; background: var(--white); border: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.svc.flip { grid-template-columns: 1fr 480px; }
.svc.flip .svc-media { order: 2; }
.svc-media img { border-radius: 16px; box-shadow: var(--shadow-lg); aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.svc-media.placeholder {
  aspect-ratio: 16/10; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue-soft), #D3E6F7); color: var(--blue); font-size: 3.6rem;
  box-shadow: var(--shadow);
}
.svc-body h3 { font-size: 1.5rem; margin-bottom: 6px; }
.svc-body .svc-sub { color: var(--blue); font-weight: 600; font-family: var(--font-head); font-size: .95rem; margin-bottom: 14px; }
.svc-body p { color: var(--ink-2); margin-bottom: 18px; }
.svc-body ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-bottom: 22px; }
.svc-body ul li { color: var(--ink-2); font-size: .92rem; display: flex; gap: 8px; align-items: flex-start; }
.svc-body ul li i { color: var(--green); margin-top: 4px; }

/* ---------- Split (About) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-media { position: relative; }
/* Fixed 16:9 canvas so ANY admin-swapped image (wide promo art, portrait photo,
   whatever) sits inside a tidy rounded frame instead of ballooning the section.
   Wide art gets a subtle branded letterbox instead of being squashed. */
.split-media .img-frame {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px;
  background: linear-gradient(135deg, #0F5A94, #12212E);
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center;
}
.split-media .img-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
.split-media img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 20px; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, #0F5A94, #12212E);
}
.split-media::before {
  content: ''; position: absolute; inset: 24px -24px -24px 24px;
  border: 3px solid var(--blue-soft); border-radius: 20px; z-index: -1;
}
.exp-badge {
  position: absolute; right: -18px; bottom: -20px; background: var(--blue); color: #fff;
  border-radius: 18px; padding: 18px 22px; text-align: center; box-shadow: var(--shadow-lg);
}
.exp-badge strong { display: block; font-size: 2rem; font-family: var(--font-head); }
.exp-badge span { font-size: .8rem; opacity: .9; }
.check-list li { display: flex; gap: 12px; margin-bottom: 12px; color: var(--ink-2); }
.check-list i { color: var(--green); margin-top: 4px; }
.split-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Stats ---------- */
.stats { background: linear-gradient(120deg, var(--blue-deep), var(--blue-dark)); color: #fff; padding: 64px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat strong { font-size: 2.6rem; font-family: var(--font-head); font-weight: 700; display: block; color: #6FC1F5; }
.stat span { color: #CFE3F4; font-size: .95rem; }

/* ---------- Pricing ---------- */
.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 28px; display: flex; flex-direction: column; position: relative; transition: .3s;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-lg); }
.pop-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: #4A2E00; font-size: .72rem; font-weight: 700;
  font-family: var(--font-head); letter-spacing: 1px; padding: 5px 14px; border-radius: 999px;
}
.price-name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.price-tagline { color: var(--ink-3); font-size: .84rem; margin-bottom: 18px; min-height: 40px; }
.price-amount { font-family: var(--font-head); font-weight: 700; color: var(--blue); font-size: 2rem; }
.price-period { color: var(--ink-3); font-size: .82rem; margin-bottom: 20px; }
.price-list { flex: 1; margin-bottom: 24px; }
.price-list li { display: flex; gap: 9px; font-size: .9rem; color: var(--ink-2); margin-bottom: 9px; }
.price-list i { color: var(--green); margin-top: 4px; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { text-align: center; padding: 30px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.step-num {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Testimonials ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.tst { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; position: relative; }
.tst .quote { position: absolute; top: 18px; right: 24px; font-size: 2.6rem; color: var(--blue-soft); font-family: Georgia, serif; }
.tst-stars { color: var(--amber); margin-bottom: 12px; }
.tst p { color: var(--ink-2); font-size: .95rem; margin-bottom: 18px; }
.tst-who { display: flex; align-items: center; gap: 12px; }
.tst-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-head);
  flex: none;
}
.tst-who strong { display: block; font-size: .95rem; }
.tst-who span { color: var(--ink-3); font-size: .82rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 44px; }
.info-card {
  display: flex; gap: 16px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 18px; transition: .3s;
}
.info-card:hover { box-shadow: var(--shadow); }
.info-card .icon-badge { margin: 0; flex: none; width: 50px; height: 50px; font-size: 1.25rem; }
.info-card strong { display: block; font-family: var(--font-head); margin-bottom: 3px; }
.info-card p, .info-card a { color: var(--ink-2); font-size: .93rem; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 500; font-size: .88rem; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: var(--bg);
  transition: border .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: .93rem; }
.alert-success { background: #E8F8EF; color: #17693A; border: 1px solid #BFE9D0; }
.alert-error { background: #FDECEC; color: #9F2226; border: 1px solid #F3C1C3; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(115deg, var(--blue-dark), var(--blue)); border-radius: 22px;
  color: #fff; padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap; box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 8px; }
.cta-band p { color: #D9E9F7; max-width: 520px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(115deg, var(--blue-deep), var(--blue-dark)); color: #fff; padding: 64px 0; }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 8px; }
.page-hero p { color: #C9DCEE; max-width: 640px; }
.breadcrumb { display: flex; gap: 8px; font-size: .85rem; margin-top: 14px; color: #9FC3E2; }
.breadcrumb a { color: #DCEBFA; }

/* ---------- Footer ---------- */
.site-footer { background: #0B2439; color: #B9CEDF; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; gap: 40px; padding: 64px 0 44px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.site-footer h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--blue); border-radius: 2px; }
.footer-about { font-size: .9rem; margin: 16px 0 18px; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: #B9CEDF; font-size: .9rem; transition: .2s; }
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; font-size: .9rem; }
.footer-contact i { color: #6FC1F5; margin-top: 4px; }
.footer-contact a { color: #B9CEDF; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; color: #DCEBFA; transition: .25s;
}
.footer-social a:hover { background: var(--blue); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: .85rem; }
.footer-bottom-in { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.footer-bottom .bi-heart-fill { color: var(--red); }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 600;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: 0 10px 26px rgba(37,211,102,.45); animation: waPulse 2.2s infinite;
}
.wa-float:hover { transform: scale(1.08); color: #fff; }
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* visually hidden but read by Google / screen readers (icon-only links) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===================== SHOP (ready products) ===================== */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.product-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: .3s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--blue-soft); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-cat {
  position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); color: var(--blue-dark);
  font-size: .72rem; font-weight: 700; font-family: var(--font-head); letter-spacing: .5px;
  padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
}
.product-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.product-body h3 a { color: var(--ink); }
.product-body h3 a:hover { color: var(--blue); }
.product-desc { color: var(--ink-3); font-size: .88rem; flex: 1; }
.product-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0; }
.product-price .now { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--blue); }
.product-price .was { color: var(--ink-3); text-decoration: line-through; font-size: .95rem; }
.product-actions { display: flex; gap: 10px; }
.save-badge { background: #E8F8EF; color: #17693A; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: start; }
/* Contain (not cover) inside a stable 16:11 box: admin-uploaded images of any
   shape display whole, never cropped/zoomed, and the layout never jumps. */
.product-media-lg { border-radius: 18px; box-shadow: var(--shadow-lg); aspect-ratio: 16/11; overflow: hidden; background: linear-gradient(135deg, #0F5A94, #12212E); display: flex; align-items: center; justify-content: center; }
.product-media-lg img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.product-price-lg { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 20px; flex-wrap: wrap; }
.product-price-lg .now { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; color: var(--blue); }
.product-price-lg .was { color: var(--ink-3); text-decoration: line-through; font-size: 1.1rem; }
.buy-box { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.secure-note { color: var(--ink-3); font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.product-long { color: var(--ink-2); line-height: 1.8; max-width: 860px; }

/* cart + checkout */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; }
.cart-line {
  display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cart-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; background: var(--blue-soft); }
.cart-line-info { flex: 1; }
.cart-line-info small { display: block; color: var(--ink-3); }
.cart-line-info a { color: var(--ink); }
.cart-line-info a:hover { color: var(--blue); }
.cart-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff;
  cursor: pointer; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { border-color: var(--blue); color: var(--blue); }
.qty-btn.danger:hover { border-color: var(--red); color: var(--red); }
.qty-n { min-width: 18px; text-align: center; font-weight: 600; }
.cart-price { font-family: var(--font-head); font-weight: 600; min-width: 92px; text-align: right; }
.cart-footnote { color: var(--ink-3); font-size: .82rem; padding-top: 14px; }
.cart-summary {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: sticky; top: 96px; box-shadow: var(--shadow);
}
.cart-summary h3 { margin-bottom: 14px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--ink-2); font-size: .93rem; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; color: var(--ink); font-size: 1.05rem; }
.cart-summary .btn { margin-top: 12px; }
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: start; }
.panel-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.checkout-form { display: grid; gap: 16px; }
.empty-note { text-align: center; color: var(--ink-3); padding: 40px 0; display: grid; gap: 10px; justify-items: center; }
.btn-cart { position: relative; background: var(--blue-soft) !important; color: var(--blue-dark) !important; }
.cart-badge {
  position: absolute; top: -8px; right: -6px; background: var(--red); color: #fff; font-size: .68rem;
  font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.dl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.dl-row small { display: block; color: var(--ink-3); }
.dl-row:last-of-type { border-bottom: 0; }
@media (max-width: 1020px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .product-layout, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shop-grid { grid-template-columns: 1fr; }
  .cart-line { flex-wrap: wrap; }
  .cart-price { min-width: 0; text-align: left; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .price-cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .svc, .svc.flip { grid-template-columns: 1fr; padding: 28px; }
  .svc.flip .svc-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* mobile header: clean white bar - logo left, quick-call + menu right
     (previous look; the slide-in drawer below keeps its own branded head) */
  .header-in { padding: 8px 0; }
  .nav-call {
    display: flex;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--blue-soft); color: var(--blue);
    font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
    margin-left: auto; transition: background .2s;
  }
  .nav-call:active { background: #D3E6F7; }
  /* --- slide-in drawer with branded head ---
     Closed state uses transform (NOT right:-320px): an offscreen fixed element
     still expands the page's scrollable width on mobile Chrome, which zooms the
     whole site out (~720px) and makes the layout look broken/unresponsive. */
  .main-nav {
    position: fixed; top: 0; right: 0; width: 300px; height: 100vh;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 0 0 26px; gap: 2px;
    transform: translateX(100%); visibility: hidden;
    box-shadow: -12px 0 40px rgba(0,0,0,.2); transition: transform .3s ease, visibility .3s; z-index: 700;
    border-radius: 0; overflow-y: auto;
  }
  .main-nav.open { transform: none; visibility: visible; }
  /* dim the page behind the open drawer; click it to close */
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(6,32,54,.45);
    z-index: 690; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  /* WHY: the drawer sits inside .site-header (position:sticky + z-index:500),
     which forms its own stacking context - the drawer's z-index:700 only
     competes INSIDE the header. Root-level floats (WhatsApp 600, Itu 610,
     mobile bar 630, lead 880) and the backdrop (690) painted OVER the open
     drawer and swallowed the taps on its menu links. While the menu is open
     we lift the whole header context above everything instead. */
  body.nav-open .site-header { z-index: 950; }
  /* the floating buttons sit exactly on the drawer's Cart / Get a Quote links
     on phones - while the menu is open they hide completely */
  body.nav-open .wa-float,
  body.nav-open .itu-launcher,
  body.nav-open .itu-launcher-tip,
  body.nav-open .itu-panel,
  body.nav-open .lead-fab,
  body.nav-open .lead-panel { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
  .main-nav .drawer-head { display: flex; }
  .drawer-head {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(115deg, var(--blue-deep), var(--blue));
    padding: 16px 18px; margin-bottom: 10px;
  }
  .drawer-head img { width: 44px; height: 40px; object-fit: contain; }
  .drawer-head strong { display: block; color: #fff; font-family: var(--font-head); font-size: 1.1rem; line-height: 1.1; }
  .drawer-head small { display: block; color: #BFE0F7; font-size: .58rem; letter-spacing: 3.5px; font-weight: 600; }
  .nav-close {
    margin-left: auto; background: rgba(255,255,255,.14); border: 0; color: #fff;
    width: 36px; height: 36px; border-radius: 10px; font-size: 1.5rem; line-height: 1; cursor: pointer;
  }
  .nav-close:hover { background: rgba(255,255,255,.3); }
  .nav-link { width: auto; margin: 0 14px; padding: 13px 14px; border-radius: 12px; border-bottom: 1px solid var(--line); }
  .nav-link:last-of-type { border-bottom: 0; }
  .nav-link.active { background: var(--blue-soft); }
  .btn-nav { margin: 14px 14px 0; }
  .nav-toggle { display: flex; z-index: 800; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .grid-3, .grid-2, .tst-grid { grid-template-columns: 1fr; }
  .grid-4, .price-cards, .steps { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  /* mobile: the "Years Experience" badge must not sit on top of the photo */
  .split-media::before { content: none; }
  .split-media .img-frame { aspect-ratio: auto; }
  .split-media .img-frame img { border-radius: 16px 16px 0 0; }
  .exp-badge {
    position: static; display: block; width: max-content;
    margin: 0 auto 0 0; padding: 12px 18px;
    border-radius: 0 0 16px 16px; box-shadow: none;
  }
  .exp-badge strong { font-size: 1.5rem; }
  .exp-badge span { font-size: .72rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* mobile: show the ENTIRE banner image uncropped (scaled to screen width),
     and put the text below it on the dark strip instead of over the artwork */
  .hero-slide img { height: auto; object-fit: contain; background: #0a1e33; }
  .hero-arrow { display: none; }
  .hero-slide::after { content: none; }
  .hero-content { position: static; }
  .hero-text { padding: 16px 0 56px; max-width: 100%; }
  .hero-text h1 { font-size: 1.25rem; margin-bottom: 8px; }
  .hero-text p { font-size: .85rem; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-tag { font-size: .62rem; letter-spacing: 1.2px; padding: 4px 10px; margin-bottom: 8px; }
  .hero-nav { bottom: 18px; }
  .hero-dot { width: 10px; height: 10px; }
  .hero-actions .btn { padding: 8px 14px; font-size: .78rem; }
  .section { padding: 60px 0; }
  .form-grid { grid-template-columns: 1fr; }
  .brand-text small { letter-spacing: 2px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-band { padding: 40px 26px; }
  .topbar-addr { display: none; }
}

/* ---------- Blog / SEO landing pages ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: .3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-3); }
.blog-city { color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.blog-card h3 { font-size: 1.02rem; line-height: 1.4; }
.blog-card h3 a { color: var(--ink); }
.blog-card h3 a:hover { color: var(--blue); }
.blog-card p { color: var(--ink-3); font-size: .88rem; flex: 1; }
.blog-article { max-width: 860px; }
.blog-body { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 36px; }
.blog-body h1 { font-size: 1.7rem; margin-bottom: 18px; }
.blog-body h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.blog-body h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.blog-body p { color: var(--ink-2); margin-bottom: 12px; }
.blog-body p.lead { font-size: 1.06rem; color: var(--ink); }
.blog-body ul.check-list { margin: 10px 0 16px; }
.blog-body ol { margin: 10px 0 16px 20px; color: var(--ink-2); display: grid; gap: 8px; }
.blog-body a { font-weight: 600; }
.blog-cta {
  margin-top: 34px; background: linear-gradient(115deg, var(--blue-dark), var(--blue));
  border-radius: 18px; color: #fff; text-align: center; padding: 34px 26px;
}
.blog-cta h3 { color: #fff; margin-bottom: 8px; }
.blog-cta p { color: #D9E9F7; margin-bottom: 16px; }
.blog-more { margin-top: 48px; }
@media (max-width: 1020px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-body { padding: 22px 18px; }
  .blog-body h1 { font-size: 1.35rem; }
}

/* ---------- Track order timeline ---------- */
.track-steps { display: grid; gap: 0; margin-top: 18px; }
.track-step { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 22px; }
.track-step:not(:last-child)::before {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px;
  background: var(--line);
}
.track-step.done:not(:last-child)::before { background: var(--green); }
.track-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; z-index: 1;
  background: var(--bg); border: 2px solid var(--line); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.track-step.done .track-dot { background: var(--green); border-color: var(--green); color: #fff; }
.track-step.active .track-dot { background: var(--amber); border-color: var(--amber); color: #fff; animation: trackPulse 1.6s infinite; }
@keyframes trackPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,.5); } 50% { box-shadow: 0 0 0 8px rgba(245,166,35,0); } }
.track-step strong { display: block; font-family: var(--font-head); font-size: .96rem; }
.track-step small { color: var(--ink-3); font-size: .8rem; }

/* ---------- UPI QR payment page ---------- */
.pay-qr-wrap { text-align: center; border: 2px dashed var(--line); border-radius: 18px; padding: 24px; background: var(--bg); }
.pay-qr { width: 240px; height: 240px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--shadow); margin: 0 auto; display: block; }
.pay-app-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; background: var(--green); color: #fff; padding: 14px 26px; border-radius: 999px; box-shadow: 0 10px 26px rgba(34,180,94,.4); }
.pay-steps { margin-top: 22px; display: grid; gap: 12px; }
.pay-step { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .94rem; }
.pay-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pay-amount-inline { color: var(--blue); }

/* ---------- Quote calculator (blog lead magnet) ---------- */
.qc-card {
  margin-top: 40px; background: var(--white); border: 2px solid var(--blue);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.qc-head {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(115deg, var(--blue-dark), var(--blue)); color: #fff; padding: 22px 26px;
}
.qc-emoji { font-size: 2rem; line-height: 1; }
.qc-head h3 { color: #fff; margin-bottom: 4px; }
.qc-head p { color: #D9E9F7; font-size: .88rem; margin: 0; }
.qc-body { padding: 24px 26px 28px; }
.qc-label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .88rem; margin-bottom: 10px; }
.qc-services { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.qc-chip {
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 8px 14px; font-size: .85rem; cursor: pointer;
  font-family: var(--font-body); transition: .2s;
}
.qc-chip:hover { border-color: var(--blue); color: var(--blue); }
.qc-chip.sel { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.qc-body input[type="range"] { width: 100%; accent-color: var(--blue); margin-bottom: 14px; }
.qc-toggles { display: grid; gap: 8px; margin-bottom: 18px; }
.qc-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.qc-check input { accent-color: var(--blue); width: 16px; height: 16px; }
.qc-btn { width: 100%; justify-content: center; font-size: 1rem; }
.qc-result { margin-top: 20px; text-align: center; }
.qc-range { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--blue); }
.qc-days { color: var(--ink-2); font-size: .92rem; margin: 6px 0 4px; }
.qc-note { color: var(--ink-3); font-size: .78rem; margin-bottom: 16px; }
.qc-leadform { background: var(--bg); border-radius: 14px; padding: 18px; text-align: left; }
.qc-leadform p { margin-bottom: 12px; font-size: .92rem; }
.qc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.qc-inputs input {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-family: var(--font-body); font-size: .92rem; width: 100%; background: #fff;
}
.qc-inputs input:focus { outline: none; border-color: var(--blue); }
.qc-inputs .qc-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.qc-leadform { position: relative; }
.qc-error { color: var(--red); font-size: .84rem; margin-top: 8px; }
.qc-done { background: #E8F8EF; border: 1px solid #BFE9D0; border-radius: 14px; padding: 20px; }
.qc-done-icon { font-size: 2rem; }
.qc-done p { margin: 8px 0 14px; }
@media (max-width: 640px) {
  .qc-inputs { grid-template-columns: 1fr; }
  .qc-head, .qc-body { padding-left: 18px; padding-right: 18px; }
  .qc-range { font-size: 1.3rem; }
}

/* ================= AI Chat Assistant ("Itu") ================= */
.itu-launcher {
  position: fixed; right: 22px; bottom: 90px; z-index: 610;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
  font-size: 1.6rem; border: 0; cursor: pointer;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .45);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; align-items: center; justify-content: center;
}
.itu-launcher:hover { transform: scale(1.08); }
.itu-launcher.active { transform: scale(.92); }
.itu-launcher-dot {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #25d366; border: 2px solid #fff;
  animation: ituBlink 1.8s infinite;
}
@keyframes ituBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.itu-launcher-tip {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: #0f2a43; color: #fff; font-size: .8rem; line-height: 1.35;
  padding: 9px 30px 9px 12px; border-radius: 12px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.itu-launcher-tip.show { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.itu-launcher-tip b { color: #93c5fd; }
.itu-tip-close {
  position: absolute; right: 4px; top: 4px; background: none; border: 0;
  color: #94a3b8; font-size: .95rem; cursor: pointer; line-height: 1;
}
.itu-tip-close:hover { color: #fff; }

.itu-panel {
  position: fixed; right: 18px; bottom: 96px; z-index: 620;
  width: 352px; max-width: calc(100vw - 24px);
  max-height: min(600px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(2, 20, 40, .35);
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.itu-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.itu-head {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #0f2a43, #1d4ed8);
  color: #fff; padding: 12px 14px;
}
.itu-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.itu-head-txt { flex: 1; line-height: 1.25; }
.itu-head-txt strong { display: block; font-size: .95rem; }
.itu-head-txt small { font-size: .72rem; color: #bfdbfe; display: flex; align-items: center; gap: 5px; }
.itu-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; }
.itu-close { background: none; border: 0; color: #cbd5e1; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.itu-close:hover { color: #fff; }

.itu-msgs { flex: 1; overflow-y: auto; padding: 14px 12px; background: #f4f8fc; display: flex; flex-direction: column; gap: 8px; }
.itu-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 14px;
  font-size: .86rem; line-height: 1.5; word-wrap: break-word; position: relative;
}
.itu-msg.bot { background: #fff; border: 1px solid #e2ecf5; border-bottom-left-radius: 4px; color: #1e293b; }
.itu-msg.me { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.itu-msg a { color: #2563eb; text-decoration: underline; font-weight: 600; }
.itu-msg.me a { color: #fff; }
.itu-msg s { opacity: .7; }
.itu-msg small { opacity: .75; }
.itu-time { font-size: .64rem; opacity: .55; margin-top: 4px; text-align: right; }
.itu-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.itu-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #93b4d4;
  animation: ituBounce 1.2s infinite;
}
.itu-typing span:nth-child(2) { animation-delay: .15s; }
.itu-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ituBounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.itu-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; background: #f4f8fc; }
.itu-chip {
  background: #fff; border: 1px solid #cfe0f0; color: #1d4ed8;
  border-radius: 999px; padding: 6px 12px; font-size: .78rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.itu-chip:hover { background: #eaf2fd; border-color: #93c5fd; }
.itu-lead-ok {
  margin: 0 12px 10px; background: #ecfdf5; border: 1px solid #a7f3d0;
  color: #047857; font-size: .78rem; padding: 7px 11px; border-radius: 10px;
}

.itu-inputrow { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #e6eef6; }
.itu-input {
  flex: 1; border: 1px solid #d7e4ef; border-radius: 999px;
  padding: 9px 14px; font-size: .86rem; outline: none; font-family: inherit;
}
.itu-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.itu-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.itu-send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 1rem;
  transition: transform .15s ease, background .15s ease;
}
.itu-send:hover { background: var(--blue-dark); transform: scale(1.06); }
.itu-foot { background: #f8fbfe; color: #7c8ea1; font-size: .68rem; text-align: center; padding: 7px; border-top: 1px solid #eef4f9; }
.itu-foot a { color: #2563eb; font-weight: 600; }

@media (max-width: 480px) {
  .itu-panel { right: 8px; left: 8px; width: auto; bottom: 86px; max-height: calc(100vh - 110px); }
  .itu-launcher { right: 16px; bottom: 86px; }
}

/* ================= Sticky mobile action bar ================= */
.mobile-bar { display: none; }

@media (max-width: 760px) {
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 630;
    background: #fff; border-top: 1px solid #e3ecf4;
    box-shadow: 0 -6px 24px rgba(6, 32, 54, .12);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  }
  .mb-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 4px; border-radius: 12px; color: #334e63; font-size: .72rem; font-weight: 600;
  }
  .mb-item i { font-size: 1.15rem; line-height: 1; }
  .mb-call:active { background: #eaf2fd; }
  .mb-wa { color: #128c4b; }
  .mb-wa:active { background: #e8f9ef; }
  .mb-shop { color: var(--blue-dark); }
  .mb-shop.active { background: #eaf2fd; }
  /* keep fixed floating buttons clear of the bar; smaller WhatsApp bubble */
  .wa-float {
    bottom: 74px !important; width: 44px; height: 44px; font-size: 1.3rem;
    box-shadow: 0 6px 18px rgba(37,211,102,.4);
  }
  .itu-launcher { bottom: 146px !important; }
  .itu-panel { bottom: 152px !important; }
  /* make room so the bar never covers page content */
  body { padding-bottom: 62px; }
}

/* ===== Quick Enquiry floating widget (lead capture on every page) ===== */
.lead-fab{position:fixed;left:18px;bottom:18px;z-index:880;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#1B75BC;color:#fff;font-weight:600;font-size:.9rem;padding:12px 18px;border-radius:999px;box-shadow:0 10px 26px rgba(15,60,100,.35);transition:transform .15s ease,box-shadow .15s ease}
.lead-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,60,100,.4)}
.lead-panel{position:fixed;left:18px;bottom:74px;z-index:881;width:min(340px,calc(100vw - 36px));background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(10,40,70,.28);border:1px solid #E6EDF3;overflow:hidden;font-size:.92rem}
.lead-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(135deg,#1B75BC,#0E5A97);color:#fff}
.lead-head strong{font-size:.98rem}
.lead-close{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lead-panel form{display:flex;flex-direction:column;gap:8px;padding:14px}
.lead-panel input,.lead-panel select,.lead-panel textarea{width:100%;padding:9px 11px;border:1px solid #D6E0EA;border-radius:8px;font:inherit;font-size:.9rem;background:#FAFCFE;box-sizing:border-box}
.lead-panel input:focus,.lead-panel select:focus,.lead-panel textarea:focus{outline:none;border-color:#1B75BC}
.lead-hp{position:absolute !important;left:-9999px !important;height:1px;width:1px;opacity:0}
.lead-send{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#1B75BC;color:#fff;border:0;border-radius:8px;padding:10px;font-weight:600;cursor:pointer}
.lead-send:disabled{opacity:.7;cursor:wait}
.lead-panel small{color:#5B6B7B;font-size:.75rem}
.lead-done{padding:22px 16px;text-align:center}
.lead-done > i{font-size:2.2rem;color:#1F9D55}
/* the WhatsApp glyph inside "Chat now" must NOT inherit the big check icon size */
.lead-done .lead-wa i{font-size:1.05rem}
.lead-done p{color:#41576B;font-size:.85rem;margin:6px 0 12px}
.lead-wa{display:inline-flex;gap:6px;align-items:center;background:#25D366;color:#fff;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.85rem;text-decoration:none}
.mobile-bar .mb-quote{color:#1B75BC;background:none;border:0;cursor:pointer;font:inherit}
@media (max-width:760px){
  .lead-fab{display:none}
  .lead-panel{left:10px;right:10px;width:auto;bottom:64px}
}
/* hidden-attribute wins over the flex layout above (thank-you state) */
.lead-panel form[hidden],.lead-panel .lead-done[hidden],.lead-panel[hidden]{display:none !important}

/* Never let one wide element zoom the whole page out on phones
   (clip is ignored gracefully by old browsers) */
html, body { overflow-x: clip; }