:root {
  --brand: #F97316;
  --brand-hover: #EA6C0A;
  --bg: #f1f4f9;
  --bg2: #ffffff;
  --bg3: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: #0F172A; font-family: 'Inter', sans-serif; overflow-x: hidden; }
html { overflow-x: hidden; }

.font-heading { font-family: 'Space Grotesk', sans-serif; }

/* Marquee */
.marquee-wrapper { overflow: hidden; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
.marquee-track {
  display: flex;
  align-items: center;
  animation: marquee-left 35s linear infinite;
  width: max-content;
  will-change: transform;
}
.marquee-track.right  { animation-direction: reverse; }
.marquee-track.slow   { animation-duration: 55s; }
.marquee-track.fast   { animation-duration: 22s; }
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero slider */
.hero-slide { display: none; opacity: 0; transition: opacity 0.8s ease; }
.hero-slide.active { display: block; opacity: 1; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* Tech grid bg */
.tech-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Card hover */
.service-card { transition: background 0.25s; }
.service-card:hover { background: #f1f5f9; }
.service-card:hover .card-img { transform: scale(1.05); }
.card-img { transition: transform 0.7s ease; }

/* Forms */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand) !important;
}

/* Buttons */
.btn-brand {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
}
.btn-brand:hover { background: var(--brand-hover); }
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn-outline:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }

/* Toast */
#toast {
  position: fixed; top: 80px; right: 24px; z-index: 1000;
  padding: 12px 18px; font-size: 14px;
  display: none; max-width: 340px;
  border: 1px solid;
}
#toast.success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
#toast.error   { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.3);  color: #fca5a5; }

/* Nav active */
.nav-link.active { color: var(--brand) !important; }

/* Modal */
#quoteModal { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); }
#quoteModal.open { display: flex; align-items: center; justify-content: center; }

/* Quote modal two-panel */
.qm-wrap {
  position: relative; display: flex; width: 100%; max-width: 860px;
  margin: 16px; max-height: calc(100vh - 32px); overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
}
.qm-left {
  width: 300px; flex-shrink: 0; background: #f8fafc;
  border-right: 1px solid rgba(15,23,42,0.10);
  display: flex; flex-direction: column; overflow-y: auto;
}
.qm-right {
  flex: 1; background: #ffffff; overflow-y: auto; padding: 36px 32px;
}
@media (max-width: 640px) {
  .qm-wrap { flex-direction: column; max-height: calc(100vh - 24px); }
  .qm-left { width: 100%; border-right: none; border-bottom: 1px solid rgba(15,23,42,0.10); }
}

/* Service selector cards in modal */
.qm-svc {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  cursor: pointer; border-left: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s;
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.qm-svc:hover { background: rgba(15,23,42,0.04); }
.qm-svc.selected { background: rgba(249,115,22,0.08); border-left-color: #F97316; }
.qm-svc.selected .qm-svc-name { color: #0F172A; }
.qm-svc.selected .qm-svc-icon { color: #F97316; background: rgba(249,115,22,0.15); }
.qm-svc-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.04); color: #64748b;
  transition: background 0.18s, color 0.18s;
}
.qm-svc-name { font-size: 12px; font-weight: 600; color: #64748b; transition: color 0.18s; }
.qm-svc-sub  { font-size: 10px; color: #94a3b8; margin-top: 1px; }

/* Modal floating label inputs */
.qm-field { position: relative; margin-bottom: 14px; }
.qm-field input, .qm-field textarea, .qm-field select {
  width: 100%; background: rgba(15,23,42,0.03);
  border: 1px solid rgba(15,23,42,0.12);
  color: #0F172A; padding: 20px 14px 7px 14px;
  font-size: 13px; outline: none; transition: border-color 0.2s, background 0.2s;
  font-family: inherit; appearance: none; -webkit-appearance: none;
}
.qm-field textarea { resize: none; padding-top: 22px; }
.qm-field input:focus, .qm-field textarea:focus {
  border-color: #F97316; background: rgba(249,115,22,0.03);
}
.qm-field label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #64748b; pointer-events: none; transition: all 0.16s ease;
}
.qm-field textarea ~ label { top: 16px; transform: none; }
.qm-field input:focus ~ label,
.qm-field input:not(:placeholder-shown) ~ label {
  top: 8px; transform: none; font-size: 8px; color: #F97316;
}
.qm-field textarea:focus ~ label,
.qm-field textarea:not(:placeholder-shown) ~ label {
  top: 6px; font-size: 8px; color: #F97316;
}

/* Mobile nav drawer */
#drawerOverlay {
  display: none; position: fixed; inset: 0; z-index: 180;
  background: rgba(15,23,42,0.45); backdrop-filter: blur(3px);
}
#drawerOverlay.open { display: block; }

#mobileDrawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 190;
  width: 300px; max-width: 85vw;
  background: #f1f4f9;
  border-right: 1px solid rgba(15,23,42,0.12);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
#mobileDrawer.open { transform: translateX(0); }

/* Drawer nav links */
.drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 24px; font-size: 15px; font-weight: 600;
  color: #475569; text-decoration: none; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
  position: relative;
}
.drawer-link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--brand);
  transform: scaleY(0); transition: transform 0.2s ease;
}
.drawer-link:hover, .drawer-link.active {
  color: #0F172A; background: rgba(15,23,42,0.03); padding-left: 30px;
}
.drawer-link:hover::before, .drawer-link.active::before { transform: scaleY(1); }
.drawer-link.active { color: var(--brand); }

/* ── Header cart link ──────────────────────────────── */
/* Present on every page: the storefront needs a permanent way back to the cart,
   not just the floating button (which hides when the cart is empty). */
.nav-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; color: #334155; text-decoration: none;
  background: rgba(15,23,42,0.05); border: 1px solid rgba(15,23,42,0.12);
  transition: color .2s, border-color .2s, background .2s;
}
.nav-cart:hover { color: #F97316; border-color: rgba(249,115,22,0.45); background: rgba(249,115,22,0.08); }
.nav-cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F97316; color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
}
/* In the drawer the badge sits inline in a button rather than pinned to a corner. */
#mobileDrawer .nav-cart-count { position: static; background: #F97316; margin-left: 2px; }

/* ── Top contact strip ─────────────────────────────── */
.header-spacer { height: 96px; }

.topbar {
  height: 32px;
  background: rgba(15,23,42,0.04);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}
.topbar-inner {
  max-width: 80rem; margin: 0 auto; padding: 0 20px; height: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: #475569; text-decoration: none; white-space: nowrap;
  transition: color 0.2s;
}
.topbar-link svg { flex-shrink: 0; color: var(--brand); }
.topbar-link:hover { color: #0F172A; }
.topbar-sep { width: 1px; height: 13px; background: rgba(15,23,42,0.14); flex-shrink: 0; }
.topbar-wa {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  color: #475569; text-decoration: none; white-space: nowrap;
  transition: color 0.2s;
}
.topbar-wa svg { flex-shrink: 0; color: #25D366; }
.topbar-wa strong { color: #0F172A; font-weight: 700; }
.topbar-wa:hover { color: #0F172A; }

/* Scrolling marquee for the WhatsApp CTA */
.topbar-marquee {
  display: block; width: 260px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.topbar-marquee-track {
  display: flex; width: max-content;
  animation: topbar-marquee 13s linear infinite;
}
.topbar-marquee-item { padding-right: 48px; white-space: nowrap; }
.topbar-wa:hover .topbar-marquee-track { animation-play-state: paused; }

@keyframes topbar-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  /* The rating badge follows the e-mail address off the strip: on a phone the
     topbar has room for the phone number and WhatsApp, nothing more. */
  .topbar-mail, .topbar-sep, .topbar-gbadge, .topbar-dl { display: none; }
  .topbar-link, .topbar-wa { font-size: 10.5px; }
  .topbar-inner { padding: 0 14px; gap: 10px; }
  .topbar-marquee { width: 47vw; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-marquee-track { animation: none; }
}

/* ── Header responsive layout (no Tailwind dependency) ── */
.nav-logo-text  { display: block; }
.nav-desktop    {
  display: none; align-items: center; gap: 28px;
  /* The header row is space-between, which parks the nav in the middle of the
     bar. `margin-left:auto` hands all the slack to the left instead, so the
     links close up against the buttons on the right and the logo keeps the
     left edge to itself. The right margin stops "Contact" touching the
     account icon. */
  margin-left: auto; margin-right: 20px;
}
.nav-quote-btn  { display: none !important; }
.nav-hamburger  { display: flex !important; }

/* Below 640px the header only has room for the logo, the cart and the burger.
   The account icon and Client Login both live in the drawer, so they step aside
   rather than pushing the burger off-screen. */
@media (max-width: 639px) {
  .nav-account   { display: none !important; }
  .nav-login-btn { display: none !important; }
}
@media (min-width: 640px) {
  .nav-quote-btn { display: inline-flex !important; }
}
@media (min-width: 1024px) {
  .nav-desktop   { display: flex !important; }
  .nav-hamburger { display: none !important; }
}

/* Fixed header scroll enhancement */
#site-header.scrolled {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 2px 32px rgba(15,23,42,0.12);
  border-bottom-color: rgba(249,115,22,0.15) !important;
}

/* ── Services mega-dropdown ─────────────────────── */
.nav-has-dropdown { position: relative; }

.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 460px; background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 20px 60px rgba(15,23,42,0.18), 0 0 0 1px rgba(249,115,22,0.08);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
.nav-has-dropdown.dd-open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* chevron icon on Services link */
.nav-chevron {
  display: inline-block; transition: transform 0.2s;
  vertical-align: middle; margin-left: 3px; opacity: 0.5;
}
.nav-has-dropdown.dd-open .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-has-dropdown.dd-open > a { color: #0F172A !important; }

/* Hover/focus dropdown (About → Projects). Unlike the Services mega-menu this
   parent is a real page, so the link keeps navigating and the panel opens on
   hover instead of swallowing the click. The padded ::after bridges the 14px
   gap to the panel so the pointer can travel down without it closing. */
.nav-dd-hover::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
}
.nav-dd-hover:hover .nav-dropdown,
.nav-dd-hover:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-hover:hover .nav-chevron,
.nav-dd-hover:focus-within .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-dd-hover:hover > a, .nav-dd-hover:focus-within > a { color: #0F172A; }

/* dropdown service cards */
.dd-svc {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; text-decoration: none;
  position: relative; transition: background 0.15s;
}
.dd-svc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: #F97316;
  transform: scaleY(0); transition: transform 0.18s ease;
  transform-origin: center;
}
.dd-svc:hover { background: rgba(249,115,22,0.07); }
.dd-svc:hover::before { transform: scaleY(1); }
.dd-svc:hover .dd-svc-name { color: #0F172A; }
.dd-svc:hover .dd-svc-icon { border-color: rgba(249,115,22,0.5) !important; }
.dd-svc-icon {
  width: 34px; height: 34px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.dd-svc-name { font-size: 12.5px; font-weight: 700; color: #334155; transition: color 0.15s; letter-spacing: 0.01em; margin-bottom: 2px; }
.dd-svc-desc { font-size: 11px; color: #64748b; line-height: 1.4; transition: color 0.15s; }
.dd-svc:hover .dd-svc-desc { color: #64748b; }

/* Mobile drawer services sub-menu */
.drawer-sub {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(15,23,42,0.04);
}
.drawer-sub.open { max-height: 400px; }
.drawer-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 36px; font-size: 12px; font-weight: 600;
  color: #64748b; text-decoration: none;
  border-bottom: 1px solid rgba(15,23,42,0.04);
  transition: color 0.15s, background 0.15s;
}
.drawer-sub-link:hover { color: #0F172A; background: rgba(249,115,22,0.06); }
.drawer-sub-link .ds-icon { color: #94a3b8; flex-shrink: 0; transition: color 0.15s; }
.drawer-sub-link:hover .ds-icon { color: #F97316; }
/* rotate chevron when sub open */
.drawer-svc-toggle .dr-chev,
.drawer-sub-toggle .dr-chev { transition: transform 0.25s; }
.drawer-svc-toggle.open .dr-chev,
.drawer-sub-toggle.open .dr-chev { transform: rotate(180deg); }
/* About's drawer row: the label link and the expand chevron sit side by side, so the
   row divider moves to the wrapper and the link keeps only its left accent bar. */
.drawer-split-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(15,23,42,0.06); }
.drawer-split-row > .drawer-link { flex: 1; border-bottom: 0; }
.drawer-sub-toggle:hover .dr-chev { opacity: 0.8; }

/* Spinner */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Section labels */
.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--brand); font-weight: 700; }

/* Dot indicator */
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.3s; }
.dot.active { background: var(--brand); }

/* ── Footer ──────────────────────────────── */
.ft-service-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  text-decoration: none; position: relative; overflow: hidden;
  transition: padding-left 0.25s ease;
}
.ft-service-link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--brand);
  transform: scaleY(0); transition: transform 0.25s ease;
  transform-origin: bottom;
}
.ft-service-link:hover { padding-left: 10px; }
.ft-service-link:hover::before { transform: scaleY(1); }
.ft-service-link:hover .ft-svc-name { color: #fff; }
.ft-service-link:hover .ft-svc-arrow { color: var(--brand); transform: translateX(3px); }
.ft-svc-name { color: #a1a1aa; font-size: 13px; transition: color 0.2s; flex: 1; }
.ft-svc-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; shrink: 0; }
.ft-svc-arrow { color: #3f3f46; font-size: 14px; transition: color 0.2s, transform 0.2s; }

.ft-contact-card {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.ft-contact-card:hover { background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.ft-contact-card:hover.orange { border-color: rgba(249,115,22,0.4); }
.ft-contact-card:hover.sky    { border-color: rgba(14,165,233,0.4); }
.ft-contact-card:hover.green  { border-color: rgba(16,185,129,0.4); }
.ft-contact-icon {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  shrink: 0; flex-shrink: 0;
}
.ft-contact-card .ft-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: #52525b; font-weight: 700; margin-bottom: 3px; }
.ft-contact-card .ft-value { font-size: 13px; font-weight: 600; color: #e4e4e7; }

/* WhatsApp note under the AMC & Support card */
.ft-wa-note {
  display: flex; align-items: center; gap: 9px;
  margin-top: -3px; padding: 9px 16px; text-decoration: none;
  font-size: 11.5px; font-weight: 600; color: #a1a1aa; line-height: 1.35;
  border: 1px solid rgba(37,211,102,0.18);
  background: rgba(37,211,102,0.06);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ft-wa-note svg { flex-shrink: 0; color: #25D366; }
.ft-wa-note strong { color: #fff; font-weight: 700; }
.ft-wa-note:hover { color: #fff; background: rgba(37,211,102,0.11); border-color: rgba(37,211,102,0.4); }

.ft-social-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1); color: #52525b;
  background: rgba(255,255,255,0.03);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
  text-decoration: none;
}
.ft-social-btn:hover { color: #fff; border-color: rgba(249,115,22,0.5); background: rgba(249,115,22,0.1); transform: translateY(-2px); }

.ft-nav-link {
  display: flex; align-items: center; gap: 8px;
  color: #71717a; font-size: 13px; text-decoration: none;
  padding: 5px 0; transition: color 0.2s, gap 0.2s;
}
.ft-nav-link:hover { color: #fff; gap: 12px; }
.ft-nav-link .ft-nav-dot { width: 4px; height: 4px; background: var(--brand); border-radius: 50%; opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.ft-nav-link:hover .ft-nav-dot { opacity: 1; }

.ft-brand-card {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0; white-space: nowrap;
  padding: 10px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 2px solid var(--bcolor, #F97316);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: default;
}
.ft-brand-card:hover {
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 20px color-mix(in srgb, var(--bcolor) 20%, transparent);
}
.ft-brand-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.ft-brand-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: #d4d4d8;
}

.marquee-track.reverse { animation-direction: reverse; }

/* ── Footer responsive layout ─────────────────── */
.ft-cta-inner  { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:40px; }
.ft-cta-right  { display:flex; flex-direction:column; gap:28px; align-items:flex-end; }
.ft-stats-row  { display:flex; gap:0; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; }
.ft-section-pad { padding:64px 48px; }
.ft-main-pad    { padding:72px 48px 48px; }
.ft-bottom-pad  { padding:18px 48px; }

.ft-main-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:48px 32px; }
.ft-span-4 { grid-column:span 4; }
.ft-span-3 { grid-column:span 3; }
.ft-span-2 { grid-column:span 2; }

@media (max-width:1023px) {
  .ft-main-grid  { grid-template-columns:1fr 1fr; gap:32px 24px; }
  .ft-span-4     { grid-column:span 2; }
  .ft-span-3, .ft-span-2 { grid-column:span 1; }
  .ft-section-pad { padding:48px 32px; }
  .ft-main-pad    { padding:52px 32px 40px; }
}
@media (max-width:640px) {
  .ft-main-grid  { grid-template-columns:1fr; gap:28px; }
  .ft-span-4, .ft-span-3, .ft-span-2 { grid-column:span 1; }
  .ft-section-pad { padding:32px 20px; }
  .ft-main-pad    { padding:36px 20px 28px; }
  .ft-bottom-pad  { padding:14px 20px; }
  .ft-cta-inner   { flex-direction:column; align-items:flex-start; gap:24px; }
  .ft-cta-right   { align-items:flex-start; width:100%; }
  .ft-stats-row   { width:100%; }
  .ft-stat-block  { flex:1; min-width:80px; }
}

/* ── Dropdown: clamp width, prevent overflow ── */
.nav-dropdown { width: min(460px, calc(100vw - 40px)); }
/* declared after the clamp above so the narrow About panel isn't widened back to 460px */
.nav-dropdown-sm { width: min(300px, calc(100vw - 40px)); }

/* ── Service page responsive ── */
.svc-pad       { padding: 96px 48px; }
.svc-hero-pad  { padding: 140px 48px 72px; width: 100%; }
.svc-uc-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.svc-uc-cards  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc-rel-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

@media (max-width:1023px) {
  .svc-pad      { padding: 64px 32px; }
  .svc-hero-pad { padding: 100px 32px 56px; }
  .svc-rel-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:767px) {
  .svc-pad       { padding: 48px 20px; }
  .svc-hero-pad  { padding: 88px 20px 44px; }
  .svc-uc-grid   { grid-template-columns: 1fr; gap: 32px; }
  .svc-uc-cards  { grid-template-columns: 1fr; }
  .svc-rel-grid  { grid-template-columns: 1fr; }
  .svc-hero-info { width: 100% !important; flex-shrink: 1 !important; }
  .process-step  { min-width: 100% !important; }
  .process-step + .process-step::before { display: none; }
}

/* ── Contact page hero stats: wrap on mobile ── */
.contact-stats { flex-wrap: wrap; }
@media (max-width:640px) {
  .contact-stats { width:100%; }
  .contact-stats > div { flex:1; min-width:90px; }
}

/* ── General page section padding on mobile ── */
@media (max-width:640px) {
  .page-section-pad { padding-left:16px !important; padding-right:16px !important; }
}

/* ── Homepage About Us section ── */
.about-pad  { padding: 80px 48px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1023px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-img-col { order: -1; }
  .about-badge { left: 16px !important; bottom: -20px !important; }
}
@media (max-width: 640px) {
  .about-pad  { padding: 48px 20px; }
  .about-badge { display: none !important; }
}

/* ── Inner page hero padding ── */
.page-hero-pad { padding: 120px 48px 80px; }
@media (max-width: 768px) { .page-hero-pad { padding: 100px 24px 60px; } }
@media (max-width: 480px) { .page-hero-pad { padding: 80px 20px 48px; } }

/* ── About page brands grid ── */
.brands-pad  { padding: 80px 48px; }
.brands-grid { grid-template-columns: repeat(6,1fr); }
@media (max-width: 1023px) { .brands-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 640px)  { .brands-grid { grid-template-columns: repeat(2,1fr); } .brands-pad { padding: 48px 20px; } }

/* ── Service page "About This Service" section ── */
.svc-about-pad  { padding: 80px 48px; }
.svc-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1023px) {
  .svc-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-about-img-col { order: -1; }
}
@media (max-width: 640px) {
  .svc-about-pad { padding: 48px 20px; }
}

.ft-stat-block { text-align: center; padding: 20px 16px; position: relative; }
.ft-stat-block + .ft-stat-block::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(255,255,255,0.07);
}
.ft-stat-val { font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1; }
.ft-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: #52525b; margin-top: 5px; font-weight: 700; }

/* ── Light-theme polish utilities (added in redesign) ───────── */
.card-elev {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.12);
}
.card-lift {
  transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1), border-color .35s ease;
  will-change: transform;
}
.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(15,23,42,0.05), 0 24px 48px -20px rgba(15,23,42,0.28);
}
.text-brand-gradient {
  background: linear-gradient(135deg,#f97316 0%,#fb923c 50%,#f59e0b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cta-glow {
  box-shadow: 0 10px 30px -10px rgba(249,115,22,0.55);
  transition: box-shadow .3s ease, transform .3s ease;
}
.cta-glow:hover { box-shadow: 0 14px 38px -10px rgba(249,115,22,0.7); transform: translateY(-2px); }
/* dark tech grid for dark sections (footer / image heroes) */
.tech-grid-dark {
  background-image:
    linear-gradient(rgba(56,189,248,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* btn-outline defaults to dark (light sections); hero uses btn-outline-light */
.btn-outline { border: 1px solid rgba(15,23,42,0.22); color: #0F172A; }
.btn-outline:hover { background: rgba(15,23,42,0.05); border-color: rgba(15,23,42,0.45); }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; font-weight: 600; transition: background .2s, border-color .2s; cursor: pointer; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }

/* ── pasted rich text (blog posts) ─────────────────────────────
   Same problem the product description had: content pasted from a supplier or
   a manufacturer's page arrives wrapped in fixed-width divs, which run off the
   side of a phone. The Tailwind build here carries no typography plugin, so
   nothing was capping them. */
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; }
.prose div, .prose p, .prose span, .prose figure, .prose ul, .prose ol {
  max-width: 100%; box-sizing: border-box;
}
.prose { overflow-wrap: anywhere; }
.prose table { display: block; overflow-x: auto; max-width: 100%; }

/* ── welcome popup ─────────────────────────────────────────────
   The one deliberate interruption on the site, so it owns the top of the stack
   while it is open. The image drives the size, capped so a tall poster still
   fits a phone screen. Several active popups cycle inside the same frame. */
.wp-overlay {
  position: fixed; inset: 0; z-index: 1400; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,0.62); opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.wp-overlay.on { opacity: 1; visibility: visible; }
.wp-box {
  position: relative; max-width: min(520px, 92vw); max-height: 88vh;
  transform: translateY(10px) scale(.98); transition: transform .25s ease;
}
.wp-overlay.on .wp-box { transform: none; }

/* Slides are stacked in the same box; only the active one is laid out, so the
   frame takes the height of whichever poster is showing. */
.wp-slides { position: relative; line-height: 0; }
.wp-slide { display: none; }
.wp-slide.on { display: block; }
.wp-slide img {
  display: block; width: 100%; height: auto; max-height: 88vh;
  object-fit: contain; box-shadow: 0 30px 70px rgba(15,23,42,0.35);
}

.wp-x {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 50%; border: 0; background: #fff; color: #0F172A;
  font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px rgba(15,23,42,0.3); z-index: 2;
}
.wp-x:hover { background: #F97316; color: #fff; }

.wp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: #0F172A; font-size: 20px; line-height: 1;
  cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(15,23,42,0.25);
}
.wp-nav:hover { background: #F97316; color: #fff; }
.wp-prev { left: -14px; }
.wp-next { right: -14px; }

.wp-dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.wp-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.45); cursor: pointer; transition: background .15s, transform .15s;
}
.wp-dot.on { background: #F97316; transform: scale(1.3); }

@media (max-width: 560px) {
  /* Keep the controls on screen rather than hanging off the corners. */
  .wp-x { top: -12px; right: -6px; }
  .wp-prev { left: 2px; }
  .wp-next { right: 2px; }
  .wp-nav { background: rgba(255,255,255,0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-overlay, .wp-box { transition: opacity .2s; }
  .wp-box { transform: none; }
}

/* ── offer poster + lightbox ───────────────────────────────────
   The card's poster is a button, so it needs the anchor's reset: no border, no
   background, and a pointer to say it does something. */
.offer-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; font-family: inherit; line-height: 0;
}
.offer-zoom-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(15,23,42,0.78); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px;
  line-height: 1; opacity: 0; transition: opacity .18s;
}
.offer-zoom:hover .offer-zoom-hint, .offer-zoom:focus-visible .offer-zoom-hint { opacity: 1; }

.poster-overlay {
  position: fixed; inset: 0; z-index: 1500; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(15,23,42,0.82); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.poster-overlay.on { opacity: 1; visibility: visible; }
.poster-inner { position: relative; max-width: min(760px, 94vw); }
.poster-inner img {
  display: block; width: 100%; height: auto; max-height: 84vh; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.poster-x {
  position: absolute; top: -16px; right: -16px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: #fff; color: #0F172A;
  font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.poster-x:hover { background: #F97316; color: #fff; }
.poster-cta {
  display: block; margin-top: 12px; text-align: center; background: #F97316;
  color: #fff; text-decoration: none; font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 20px;
}
.poster-cta:hover { background: #ea6a0c; }
@media (max-width: 560px) {
  .poster-overlay { padding: 16px; }
  .poster-x { top: -14px; right: -8px; }
}


/* ── Floating corner furniture ────────────────────────────────────────────────
   Four things want a bottom corner: the live-chat bubble, the site assistant,
   the social-proof popup and the shop's quote list. Each widget ships its own
   position, injected at runtime, so the arrangement is settled here — the last
   word, and one place to read it.

     bottom-left   live chat bubble          (moved here from the right)
     bottom-left   social-proof popup, above the bubble so neither is covered
     bottom-right  site assistant launcher
     bottom-right  quote-list bar, above the launcher

   !important is deliberate: these rules override styles the widgets write into
   the document themselves, which would otherwise win on document order. */

/* The live-chat bubble is hidden: the assistant is the single way in, and two
   floating buttons in one corner is clutter. It comes back the moment there is
   a conversation to return to — otherwise a reply from the office would arrive
   with nothing on screen to open it. See autobot.js, which sets the class. */
#ia-chat-btn { display: none !important; }
html.ia-chat-live #ia-chat-btn { display: flex !important; left: 22px !important; right: auto !important; }
#ia-chat-win { left: 22px !important; right: auto !important; }

.sp-toast { bottom: 90px !important; }

#iab-btn { right: 22px !important; }
#qlBar   { bottom: 90px !important; }

@media (max-width: 480px) {
  /* On a phone the chat window is full width, so it keeps its own edges. */
  #ia-chat-win { left: 10px !important; right: 10px !important; width: auto !important; }
  .sp-toast    { bottom: 84px !important; }
  #iab-btn     { right: 16px !important; }
  html.ia-chat-live #ia-chat-btn { left: 16px !important; }
}