/* ===== ROOT VARIABLES ===== */
:root {
  --primary: #e85d04;
  --primary-dark: #c94d00;
  --secondary: #1a1a2e;
  --dark: #0f0f1a;
  --light: #f8f9fa;
  --gray: #6c757d;
  --gray-light: #e9ecef;
  --white: #ffffff;
  --text: #212529;
  --text-muted: #6c757d;
  --border: #dee2e6;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
  --radius: 8px;
  --radius-lg: 16px;
  --transition: 0.3s ease;
  --font: 'Inter', sans-serif;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
[hidden] { display: none !important; }
.form-honeypot { display: none !important; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary);
}
h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: 1.2rem; }
p { margin-bottom: 1rem; }

/* ===== UTILITY CLASSES ===== */
/* Full-width with 80px gutters — matches the navbar's gutters exactly */
.container { max-width: none; margin: 0 auto; padding: 0 80px; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.text-center { text-align: center; }
.text-white { color: var(--white) !important; }
.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-dark { background: var(--secondary); }
.bg-light { background: var(--light); }
.bg-primary { background: var(--primary); }
.fw-bold { font-weight: 700; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-auto { margin-top: auto; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== SECTION HEADER ===== */
.section-header { margin-bottom: 3rem; }
.section-header.text-center { text-align: center; }

.section-tag {
  display: inline-block;
  background: rgba(232, 93, 4, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 0.8rem;
}

.section-header h2 { margin-bottom: 1rem; }
.section-header p { color: var(--text-muted); max-width: 600px; font-size: 1.05rem; }
.section-header.text-center p { margin: 0 auto; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,93,4,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--secondary);
  border-color: var(--secondary);
}
.btn-outline-dark:hover {
  background: var(--secondary);
  color: var(--white);
}

.btn-lg { padding: 1rem 2.25rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1.2rem; font-size: 0.875rem; }

/* ===== SITE HEADER (two-tier: topbar + navbar) ===== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When scrolled past topbar: shift entire header up by topbar height so navbar locks to top */
.site-header.topbar-collapsed {
  top: -42px;
}

/* ===== TOPBAR ===== */
.topbar {
  height: 42px;
  background: var(--dark);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.topbar-wrap {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.topbar-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 80px; /* left edge matches navbar logo + hero heading */
  min-width: 0;
}

.topbar-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.topbar-link:hover { color: var(--primary); }
.topbar-link svg { flex-shrink: 0; }
.topbar-link.copy-email {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: copy;
}

.topbar-sep {
  color: rgba(255,255,255,0.2);
  font-size: 11px;
}

/* Orange right panel — diagonal left edge, bleeds to viewport right */
.topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 1.5rem 0 52px;
  position: relative;
}

.topbar-right::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -28px;
  right: -100vw; /* bleed to viewport right edge */
  background: var(--primary);
  clip-path: polygon(28px 0%, 100% 0%, 100% 100%, 0% 100%);
}

.topbar-action {
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.topbar-action:hover { background: rgba(255,255,255,0.14); color: #fff; }
.topbar-action--cta { background: transparent; }
.topbar-action--cta:hover { background: rgba(255,255,255,0.14); }

.topbar-vsep {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.28);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Language switcher */
.lang-switcher {
  position: relative;
  z-index: 1;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.lang-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

.lang-chevron { transition: transform 0.22s ease; }
.lang-btn.is-open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: fixed;
  min-width: 140px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
.lang-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.lang-opt {
  display: block;
  padding: 9px 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  font-family: 'Inter', sans-serif;
}
.lang-opt:hover,
.lang-opt--active { background: rgba(232,93,4,0.1); color: var(--primary); }

/* ===== MAIN NAVBAR ===== */
.navbar {
  background: #f3f3f3;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 72px;
}

/* Once the user scrolls past the hero, navbar becomes frosted glass —
   content behind shows through, heavily blurred + saturated for the glassmorphism look */
.navbar.scrolled {
  background: rgba(243, 243, 243, 0.62);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
}

/* Navbar aligns to the hero heading's left edge (80px) — symmetrical on both sides */
.navbar .container {
  max-width: 100%;
  padding: 0 80px;
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 1.25rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

.nav-logo .logo-icon {
  width: auto;
  height: 52px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer brand link — small flame on dark background */
.footer .nav-logo .logo-icon { height: 44px; }

/* Links pushed to the right, just before the WhatsApp button */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
}

.nav-link {
  padding: 0.45rem 0.9rem;
  color: #444;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--secondary); background: rgba(0,0,0,0.06); }
.nav-link.active { color: var(--primary); font-weight: 600; background: rgba(232,93,4,0.07); }

/* Right side — WhatsApp button */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* WhatsApp Contact button */
.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25D366;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.nav-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
}
.nav-whatsapp .wa-icon { flex-shrink: 0; }

/* Call button — orange, sits to the right of WhatsApp */
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.nav-call:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,93,4,0.4);
}
.nav-call svg { flex-shrink: 0; }

/* Shared call icon — sourced from the supplied phone.svg.
   Masking preserves the exact path while inheriting each button's text colour. */
.topbar-link[href^="tel:"] > svg,
.nav-call > svg,
.nav-mobile-call > svg,
.pj-cta-call > svg {
  display: none;
}
.topbar-link[href^="tel:"]::before,
.nav-call::before,
.nav-mobile-call::before,
.pj-cta-call::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/phone.svg") center / contain no-repeat;
          mask: url("../assets/icons/phone.svg") center / contain no-repeat;
}
.topbar-link[href^="tel:"]::before { width: 13px; height: 13px; }
.nav-call::before { width: 15px; height: 15px; }

/* ===== GOOGLE TRANSLATE — hide widget UI, keep only translation effect ===== */
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; }
font[style*="background-color"] { background: transparent !important; box-shadow: none !important; }

/* Mobile-only nav drawer items — hidden on desktop, shown via responsive.css on mobile */
.nav-mobile-only { display: none; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--secondary);
  border-radius: 2px;
  transition: var(--transition);
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 60%, #2d1b00 100%);
  overflow: hidden;
  padding-top: 70px;
}

.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(232,93,4,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(232,93,4,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(232,93,4,0.15);
  border: 1px solid rgba(232,93,4,0.3);
  color: #f97316;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.25rem;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
}
.hero h1 .highlight {
  color: var(--primary);
  position: relative;
}

.hero p {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  max-width: 560px;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.hero-stat .num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.hero-stat .num span { color: var(--primary); }
.hero-stat .label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== STATS BAR ===== */
.stats-bar {
  background: var(--secondary);
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat-item .num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-item .label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-item .sublabel {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-top: 0.1rem;
}

/* ===== SERVICES GRID ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transition: var(--transition);
  transform-origin: left;
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 56px;
  height: 56px;
  background: rgba(232,93,4,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.service-card h3 { margin-bottom: 0.75rem; font-size: 1.15rem; }
.service-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

.service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.service-tag {
  font-size: 0.72rem;
  background: var(--light);
  color: var(--gray);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-weight: 500;
}

/* ===== PROJECT CARDS ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border);
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.project-img {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary), var(--primary-dark));
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-img img { transform: scale(1.05); }

.project-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 2.5rem;
}
.project-img-placeholder span {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}

.project-category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-body { padding: 1.5rem; }
.project-body h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.project-body p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem; }

.project-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.project-meta span { display: flex; align-items: center; gap: 0.3rem; }

/* ===== WHY CHOOSE US ===== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.why-list { display: flex; flex-direction: column; gap: 1.25rem; }

.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-icon {
  width: 44px;
  height: 44px;
  background: rgba(232,93,4,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.why-text h4 { margin-bottom: 0.25rem; font-size: 1rem; }
.why-text p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

.why-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary), #2d1b00);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-visual-content {
  text-align: center;
  color: var(--white);
}
.why-visual-icon { font-size: 5rem; margin-bottom: 1rem; }
.why-visual-content h3 { color: var(--white); margin-bottom: 0.5rem; }
.why-visual-content p { color: rgba(255,255,255,0.6); font-size: 0.9rem; }

/* ===== CLIENTS ===== */
.clients-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.client-logo-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: var(--transition);
}
.client-logo-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 15px rgba(232,93,4,0.12);
  transform: translateY(-2px);
}
.client-logo-item .client-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--secondary);
}
.client-logo-item .client-sector {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
}
.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.testimonial-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; margin-bottom: 1rem; }
.testimonial-text { color: var(--text); font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.author-avatar {
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 1rem;
}
.author-name { font-weight: 700; font-size: 0.9rem; }
.author-title { font-size: 0.78rem; color: var(--text-muted); }

/* ===== CTA SECTION ===== */
.cta-section {
  background: linear-gradient(135deg, var(--secondary) 0%, #2d1b00 100%);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(232,93,4,0.2), transparent 60%);
}
.cta-content { position: relative; z-index: 1; }

.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.7); max-width: 550px; margin: 0 auto 2rem; font-size: 1.05rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== FOOTER ===== */
.footer {
  position: relative;
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding: 4.5rem 0 0;
  overflow: hidden;
}
/* Thin orange top accent + dot-grid signature echo */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), rgba(255,96,18,0) 55%);
}
.footer::after {
  content: '';
  position: absolute;
  top: 2.5rem; right: -30px;
  width: 200px; height: 200px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.8px);
  background-size: 22px 22px;
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand .nav-logo { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.55); margin-bottom: 1.25rem; }

.footer-social { display: flex; gap: 0.6rem; }
.social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
  text-decoration: none;
}
.social-link:hover { background: var(--primary); color: var(--white); }

.footer-col h4 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: var(--transition);
}
.footer-links a:hover { color: var(--primary); padding-left: 4px; }

.footer-contact-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
}
.footer-contact-item .icon { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

.footer-bottom {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-bottom a:hover { color: var(--primary); }

/* ===== PAGE HERO (inner pages) ===== */
.page-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%);
  padding: 9.5rem 0 4rem; /* 110px header + ~42px buffer */
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(232,93,4,0.1), transparent 50%);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); margin-bottom: 0.75rem; }
.page-hero p { color: rgba(255,255,255,0.65); font-size: 1.05rem; max-width: 600px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: 0.4; }

/* ===== CONTACT SECTION ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }

.contact-info-card {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  color: var(--white);
}
.contact-info-card h3 { color: var(--white); margin-bottom: 0.5rem; }
.contact-info-card > p { color: rgba(255,255,255,0.6); margin-bottom: 2rem; font-size: 0.9rem; }

.contact-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.contact-detail-icon {
  width: 44px; height: 44px;
  background: rgba(232,93,4,0.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--primary);
  flex-shrink: 0;
}
.contact-detail-text h4 { color: var(--white); font-size: 0.9rem; margin-bottom: 0.2rem; }
.contact-detail-text p { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}
.contact-form-card h3 { margin-bottom: 0.25rem; }
.contact-form-card > p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem; }

/* ===== FORM STYLES ===== */
.form-group { margin-bottom: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--white);
  transition: var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,96,18,0.12);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-success {
  display: none;
  background: #d1fae5;
  color: #065f46;
  padding: 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: center;
}
.form-success.show { display: block; }

/* ===== BLOG CARDS ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card-img {
  height: 200px;
  background: linear-gradient(135deg, var(--secondary), #2d1b00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
}

.blog-category-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-card-body { padding: 1.5rem; }
.blog-meta { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.blog-card-body h3 { font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.4; }
.blog-card-body h3 a { color: var(--secondary); text-decoration: none; }
.blog-card-body h3 a:hover { color: var(--primary); }
.blog-card-body p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.blog-read-more { font-size: 0.85rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.blog-read-more:hover { text-decoration: underline; }

/* ===== ABOUT PAGE ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

.team-card h4 { margin-bottom: 0.2rem; font-size: 0.95rem; }
.team-card .role { font-size: 0.8rem; color: var(--primary); font-weight: 600; margin-bottom: 0.5rem; }
.team-card p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* ===== VALUES ===== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.value-card {
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition);
}
.value-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(232,93,4,0.1); }
.value-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.value-card h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.value-card p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* ===== 404 PAGE ===== */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dark), var(--secondary));
  text-align: center;
  padding: 2rem;
}
.not-found-content { color: var(--white); }
.not-found-num {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0;
}
/* h1 for correct document outline; h2 kept so the rule is stable if
   the markup changes. Both render identically. */
/* h1 for a correct document outline. The element was an h2, so the h2
   type-scale size is pinned here to keep the rendering pixel-identical. */
.not-found h1,
.not-found h2 {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}
.not-found p { color: rgba(255,255,255,0.6); margin-bottom: 2rem; }

/* ===== BLOG POST ===== */
.post-content {
  max-width: 780px;
  margin: 0 auto;
}
.post-content h2 { margin: 2.5rem 0 1rem; }
.post-content h3 { margin: 2rem 0 0.75rem; }
.post-content p { margin-bottom: 1.25rem; color: #374151; line-height: 1.8; }
/* Long-form prose (legal pages, blog copy) needs real list markers — the
   global `ul { list-style: none }` reset strips them, but the 1.5rem indent
   here has always assumed a marker sits in that space. */
.post-content ul, .post-content ol {
  margin: 0 0 1.25rem 1.5rem;
  color: #374151;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content ul ul { list-style: circle; }
.post-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.post-content blockquote {
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  background: rgba(232,93,4,0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--secondary);
}

/* ===== ACCORDION ===== */
.accordion { display: flex; flex-direction: column; gap: 0.75rem; }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.accordion-header {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  transition: var(--transition);
  user-select: none;
}
.accordion-header:hover { background: var(--light); }
.accordion-header.open { background: var(--light); color: var(--primary); }
.accordion-body {
  display: none;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.accordion-body.open { display: block; }
.accordion-chevron { transition: var(--transition); }
.accordion-header.open .accordion-chevron { transform: rotate(180deg); }

/* ===== SERVICES FAQ ===== */
.sv-faq {
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
  background: var(--white);
  border-top: 1px solid var(--border);
}

.sv-faq .container {
  position: relative;
}

.sv-faq-head {
  margin-bottom: 2.25rem;
  text-align: center;
}

.sv-faq-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sv-faq-head h2 {
  margin: 0;
  color: var(--secondary);
  font-size: clamp(2.2rem, 4vw, 3.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.sv-faq-list {
  width: min(100%, 880px);
  margin: 0 auto;
  gap: 0.75rem;
}

.sv-faq .accordion-item {
  overflow: visible;
  border: 1px solid #e2e5ea;
  border-radius: 16px;
  background: #f6f7f9;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.sv-faq .accordion-item:has(.accordion-header.open) {
  border-color: #d8dce3;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(18, 24, 40, 0.06);
}

.sv-faq .accordion-header {
  width: 100%;
  min-height: 62px;
  gap: 1.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1.35rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
}

.sv-faq .accordion-header:hover,
.sv-faq .accordion-header.open {
  background: transparent;
  color: var(--secondary);
}

.sv-faq .accordion-item:not(:has(.accordion-header.open)):hover {
  border-color: #cfd4dc;
  background: #f2f3f5;
}

.sv-faq .accordion-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sv-faq-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d9dde4;
  border-radius: 50%;
  background: #fff;
  color: var(--secondary);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  transition:
    transform 240ms ease,
    background-color 240ms ease;
}

.sv-faq .accordion-header.open .sv-faq-toggle {
  transform: rotate(45deg);
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.sv-faq .accordion-body {
  padding: 0 5.25rem 1.45rem 1.35rem;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .sv-faq {
    padding: 3.75rem 0;
  }

  .sv-faq-head {
    margin-bottom: 1.6rem;
  }

  .sv-faq-head h2 {
    font-size: clamp(2.1rem, 10vw, 2.75rem);
  }

  .sv-faq .accordion-item,
  .sv-faq .accordion-item:has(.accordion-header.open) {
    border-radius: 14px;
  }

  .sv-faq .accordion-header {
    min-height: 56px;
    padding-left: 1.15rem;
    font-size: 0.92rem;
  }

  .sv-faq-toggle {
    width: 40px;
    height: 40px;
  }

  .sv-faq .accordion-body {
    padding: 0 1.15rem 1.3rem;
  }
}

/* ===== CERTIFICATION BADGES ===== */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cert-card {
  text-align: center;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cert-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.cert-card h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
.cert-card p { font-size: 0.78rem; color: var(--text-muted); margin: 0; }

/* ===== INDUSTRIES SHOWCASE HERO ===== */

.ind-showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #060606;
}

/* Stacked background panels */
.ind-bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ind-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center center;
  will-change: opacity;
}

/* Crosshatch grid texture on every background panel */
.ind-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.ind-bg--active { opacity: 1; }

/* Per-industry full-bleed background photos.
   Replace the URLs in this section with your final industrial photos (1920×1080+ recommended).
   The .ind-overlay above darkens left + bottom for headline legibility. */
/* WebP hero backgrounds cut the initial industry imagery from ~13 MB to
   ~1.3 MB while preserving the same crop, positioning and visual treatment. */
.ind-bg-0 { background: #0c0704 url('../assets/images/responsive/hero/hospitality-building-fire-safety-1200.webp') center / cover no-repeat; }
.ind-bg-1 { background: #060810 url('../assets/images/responsive/hero/industrial-1200.webp') center / cover no-repeat; }
.ind-bg-2 { background: #060c0c url('../assets/images/responsive/hero/healthcare-1200.webp') center / cover no-repeat; }
.ind-bg-3 { background: #0a0906 url('../assets/images/responsive/hero/logistics-1200.webp') center / cover no-repeat; }
.ind-bg-4 { background: #0e0800 url('../assets/images/responsive/hero/retail-1200.webp') center / cover no-repeat; }
.ind-bg-5 { background: #040610 url('../assets/images/responsive/hero/it-data-center-1200.webp') center / cover no-repeat; }

/* Gradient overlay — top clear → bottom dark for tab legibility + left dark for content */
.ind-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.25) 30%,
      rgba(0,0,0,0.55) 68%,
      rgba(0,0,0,0.85) 100%
    ),
    linear-gradient(to right,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.45) 38%,
      rgba(0,0,0,0.15) 70%,
      rgba(0,0,0,0) 100%
    );
}

/* ===== CONTENT BLOCK — positioned between top-left and center over full-bleed photo ===== */
.ind-content {
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%); /* true vertical centering */
  z-index: 3;
  max-width: 760px;
}

.ind-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.ind-eyebrow-accent {
  display: block;
  width: 3px;
  height: 17px;
  background: var(--primary);
  flex-shrink: 0;
}

.ind-eyebrow-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: 2.4px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  line-height: 1;
}

/* Rotating last word in the headline — highlighted orange */
.ind-headline-word {
  display: inline-block;
  color: var(--primary);
  transition: opacity 280ms ease, transform 280ms ease;
  will-change: opacity, transform;
}
.ind-headline-word.ind-word--fading {
  opacity: 0;
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .ind-headline-word { transition: none; }
}

.ind-headline {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.06;
  margin: 0 0 40px;
  transition: opacity 200ms ease, transform 210ms ease;
  will-change: opacity, transform;
}

.ind-headline.ind-headline--fading {
  opacity: 0;
  transform: translateY(9px);
}

/* Sharp industrial CTA — zero border-radius */
.ind-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 20px 48px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.22s ease;
  white-space: nowrap;
}

.ind-cta:hover { background: var(--primary-dark); }

.ind-cta > span {
  font-size: 21px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.22s ease;
}

.ind-cta:hover > span { transform: translateX(4px); }

/* ===== TAB STRIP ===== */

.ind-strip-outer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.ind-tab {
  position: relative;
  padding: 24px 20px 28px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.1);
  color: white;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.ind-tab:last-child { border-right: none; }

.ind-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Rising orange fill — slides up from below */
.ind-tab-fill {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateY(102%);
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
  will-change: transform;
}

.ind-tab--active .ind-tab-fill {
  transform: translateY(0%);
}
/* Hover is gated to real pointers. On a touchscreen :hover sticks to the last
   tapped element, so a tapped row kept its orange fill even after the auto-
   rotation moved the active state on — leaving two rows orange at once. */
@media (hover: hover) and (pointer: fine) {
  .ind-tab:hover .ind-tab-fill {
    transform: translateY(0%);
  }
}

/* Top accent line */
.ind-tab-topline {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1.5px;
  background: rgba(255,255,255,0.38);
  z-index: 1;
  transition: background 0.26s ease, height 0.22s ease, left 0.32s ease, right 0.32s ease;
}

.ind-tab--active .ind-tab-topline {
  background: rgba(255,255,255,1);
  height: 2px;
  left: 0;
  right: 0;
}
@media (hover: hover) and (pointer: fine) {
  .ind-tab:hover .ind-tab-topline {
    background: rgba(255,255,255,1);
    height: 2px;
    left: 0;
    right: 0;
  }
}

/* Tab inner content */
.ind-tab-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 16px;
}

.ind-tab-title {
  display: block;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.96);
  line-height: 1.3;
}

.ind-tab-desc {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.62);
  line-height: 1.58;
  font-weight: 400;
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .ind-bg,
  .ind-headline,
  .ind-tab-fill,
  .ind-tab-topline { transition: none !important; }
}

/* ===== SCROLL TO TOP ===== */
/* Back-to-top: pill tucked flush to the right edge, expands on hover */
.scroll-top {
  position: fixed;
  bottom: 2.5rem;
  right: 0;
  height: 42px;
  padding: 0 14px;
  background: var(--primary);
  color: var(--white);
  border: none;
  /* rounded on the left only — the right side hugs the screen edge */
  border-radius: 14px 0 0 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 999;
  box-shadow: 0 6px 20px rgba(255, 96, 18, 0.35);
  /* hidden state: slid off to the right */
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.3s ease, background 0.25s ease;
}
.scroll-top.show { opacity: 1; transform: translateX(0); }
.scroll-top:hover { background: var(--primary-dark); }

.scroll-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scroll-top-icon svg { width: 20px; height: 20px; display: block; }

/* "TOP" label is collapsed by default, revealed on hover */
.scroll-top-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.25s ease, margin 0.35s ease;
}
.scroll-top:hover .scroll-top-label,
.scroll-top:focus-visible .scroll-top-label {
  max-width: 60px;
  opacity: 1;
  margin-left: 7px;
}
.scroll-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top,
  .scroll-top-label { transition: opacity 0.2s ease; }
}

/* ===== CLIENTS LOGO MARQUEE ===== */
.clients-marquee-section {
  background: #ffffff;
}
.clients-marquee-section .section-header {
  margin-bottom: 1.5rem;
}

.logo-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 32px 0 16px;
}

/* Edge fades — fade to section background so logos drift in/out softly */
.logo-marquee-wrapper::before,
.logo-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.logo-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.logo-row {
  display: flex;
  gap: 72px;
  padding: 18px 0;
  align-items: center;
  width: max-content;
}
.logo-row.left  { animation: marquee-left  60s linear infinite; }
.logo-row.right { animation: marquee-right 65s linear infinite; }

.logo-item {
  flex-shrink: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 195px;
}
.logo-item img {
  height: 100%;
  width: auto;
  max-width: 255px;
  object-fit: contain;
  display: block;
}

/* (Marquee keeps scrolling on hover by design) */

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-row.left, .logo-row.right { animation: none; }
}

@media (max-width: 768px) {
  .logo-marquee-wrapper { padding: 20px 0 8px; }
  .logo-row { gap: 48px; padding: 14px 0; }
  .logo-item { height: 72px; min-width: 150px; }
  .logo-item img { max-width: 218px; }
  .logo-marquee-wrapper::before,
  .logo-marquee-wrapper::after { width: 80px; }
}

@media (max-width: 480px) {
  .logo-row.left  { animation-duration: 45s; }
  .logo-row.right { animation-duration: 50s; }
  .logo-item { height: 63px; min-width: 135px; }
  .logo-item img { max-width: 195px; }
  .logo-marquee-wrapper::before,
  .logo-marquee-wrapper::after { width: 50px; }
}

/* ===== SOLUTIONS WE OFFER ===== */
.solutions-section {
  position: relative;
  background: #F4F5F7;
  overflow: hidden;                /* crop the hex rings at the edges */
}
.solutions-section .section-header { margin-bottom: 3rem; }
/* Match the navbar width exactly (navbar uses padding: 0 80px) */
.solutions-section .features-container {
  position: relative;
  z-index: 1;                      /* content above the hex rings */
  padding: 0 80px;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Vertical card: text block on top, visual panel filling the lower half.
   Hover is a colour-state change only: typography and imagery keep their
   exact dimensions while the Firetech blue surface brings the card forward. */
.solution-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  box-shadow: 0 2px 14px rgba(20, 30, 60, 0.05);
  height: 420px;
}
/* Card surface stays WHITE on hover — only the CTA pill fills orange. */
.solution-card:hover,
.solution-card:focus-visible {
  border-color: #CBD5E1;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
}
.solution-card:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.55);
  outline-offset: 4px;
}

/* Top text block */
.solution-body {
  padding: 26px 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* heading, sub and CTA share one left edge */
  gap: 10px;
}
/* size/weight set in the UNIVERSAL TYPE SCALE block near the end of this file.
   Text colour does NOT change on hover — the card stays white. */
.solution-body h3 {
  color: var(--secondary);
  margin: 0;
  line-height: 1.2;
}
.solution-sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #64748B;
  margin: 0;
}
/* only the short one-liner is ever shown now — resting and hover layouts match */
.sub-long { display: none; }

/* Pill CTA. Negative side margins pull the padding box outward so the label's
   left edge lines up with the heading above it, at rest and on hover alike. */
.solution-view {
  margin: 2px -14px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(0);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.solution-view > span {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Solid orange pill, white label + arrow — no glow.
   At rest the pill's padding box hangs 14px left of the text (via the negative
   margin) so the *label* aligns with the heading. On hover the background
   appears, so the pill glides right by exactly that 14px — its *left edge* now
   lands on the heading's line, and the whole control eases rightward. */
.solution-card:hover .solution-view,
.solution-card:focus-visible .solution-view {
  background: var(--primary);
  color: #fff;
  transform: translateX(14px);
}
/* the arrow travels a touch further, so the pill reads as moving forward */
.solution-card:hover .solution-view > span,
.solution-card:focus-visible .solution-view > span {
  transform: translateX(3px);
}

/* Lower visual panel — fills the rest of the card, inset with rounded corners.
   Fixed size at rest and on hover. */
.solution-img {
  margin: 0 16px 16px;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #EFF1F5;
}
.solution-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .solution-card,
  .solution-view,
  .solution-view > span {
    transition: none;
  }
  .solution-card:hover,
  .solution-card:focus-visible {
    transform: none;
  }
  /* the pill keeps its 14px shift — that's alignment, not decoration — but the
     arrow's extra travel is purely motion, so it's dropped */
  .solution-card:hover .solution-view > span,
  .solution-card:focus-visible .solution-view > span {
    transform: none;
  }
}

/* ===== TRUST / ABOUT SECTION ===== */
.trust-section {
  padding: 0 0 5rem;
  /* Grey base so the lower area (cards + padding) flows into the
     Certifications section; the top panels get their own white backing. */
  background: #F4F5F7;
  position: relative;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 624px;
  background: #fff;   /* keep the panel band white; grey only shows below it */
}
.trust-text-panel {
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4rem 3rem 4rem 6rem;
  position: relative;
  overflow: hidden;
}
/* Decorative hex/dot pattern in top-left */
.trust-text-panel::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1.5px, transparent 1.8px);
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none;
}
.trust-text-inner {
  max-width: 520px;
  position: relative;
  z-index: 1;
}
.trust-text-inner h2 {
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.trust-text-inner p {
  color: rgba(255,255,255,0.95);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.trust-text-inner p:last-child { margin-bottom: 0; }

.trust-image-panel {
  position: relative;
  overflow: hidden;
  background: #eee;
}
.trust-image-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trust-image-panel .trust-team-photo {
  object-position: center 64%;
}

/* Cards row — overlaps slightly with the image/panel above */
.trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.trust-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.trust-card-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.trust-card-icon svg {
  width: 100%;
  height: 100%;
}
.trust-card-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 4px;
  line-height: 1.2;
}
.trust-card-body p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   CERTIFICATIONS & AUTHORIZATIONS — rebuilt to reference
   Left: caps heading, sub, 3 A4 thumbnails, prev/next centred
   Right: large featured certificate on an offset white caption
   card. Hexagon outline accents on the section corners.
   ============================================================ */
.certs-section {
  position: relative;
  background: #F4F5F7;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0 clamp(5rem, 8vw, 7rem);
  overflow: hidden;
}
/* ============================================================
   SOLUTIONS — service detail modal (sol-modal-)
   Clicking a solution card opens its full detail in a centered
   card over a dark, blurred backdrop. One shared overlay, six
   panels toggled by data-panel matching the card's data-modal.
   ============================================================ */
.sol-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sol-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.sol-modal {
  position: relative;
  width: min(100%, 1040px);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.45);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.sol-modal-overlay.is-open .sol-modal {
  transform: translateY(0) scale(1);
}
.sol-modal-close {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.25rem);
  right: clamp(0.9rem, 2vw, 1.25rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  /* solid dark orange with a white X — unmistakable against the white card */
  border: none;
  border-radius: 50%;
  background: #C94D00;
  color: #fff;
  box-shadow: 0 6px 16px rgba(201, 77, 0, 0.28);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
/* hover: brand blue, X stays white */
.sol-modal-close:hover {
  background: #1D3A72;
  color: #fff;
  box-shadow: 0 7px 18px rgba(29, 58, 114, 0.3);
  transform: scale(1.05);
}
.sol-modal-close:focus-visible {
  outline: 3px solid rgba(29, 58, 114, 0.45);
  outline-offset: 3px;
}

/* one panel visible at a time */
.sol-modal-panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  grid-template-areas:
    "text media"
    "pills pills";
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
}
.sol-modal-panel.is-active { display: grid; }
.sol-modal-text {
  grid-area: text;
  min-width: 0;
  align-self: center;
}

.sol-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFE6DA;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.sol-modal-icon svg { width: 30px; height: 30px; }
.sol-modal-text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.sol-modal-sub {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.sol-modal-features {
  background: #F4F5F7;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
}
.sol-modal-features-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 0.75rem;
}

/* ============================================================
   SEARCH LANDING PAGES — lp-
   ============================================================ */
.lp-hero {
  padding: 146px 0 78px;
  background: linear-gradient(145deg, #fff 0%, #fff8f3 100%);
  border-bottom: 1px solid var(--border);
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
}
.lp-hero .breadcrumb { margin-bottom: 42px; color: #748093; }
.lp-hero .breadcrumb a { color: #596477; }
.lp-hero .breadcrumb a:hover { color: var(--primary); }
.lp-kicker,
.lp-section-no {
  display: block;
  color: var(--primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.lp-hero h1 {
  max-width: 760px;
  margin: 13px 0 22px;
  color: var(--secondary);
  font-size: clamp(2.5rem, 5vw, 4.65rem);
  line-height: .99;
  letter-spacing: -.045em;
}
.lp-hero-copy > p {
  max-width: 680px;
  margin: 0;
  color: #4e5969;
  font-size: 1.08rem;
  line-height: 1.75;
}
.lp-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; flex-wrap: wrap; }
.lp-text-link { color: var(--secondary); font-weight: 750; text-decoration: underline; text-decoration-color: rgba(232,93,4,.45); text-underline-offset: 5px; }
.lp-hero-media { margin: 0; position: relative; }
.lp-hero-media::before {
  content: "";
  position: absolute;
  inset: -14px 18px 18px -14px;
  border: 1px solid rgba(232,93,4,.32);
  border-radius: var(--radius);
  pointer-events: none;
}
.lp-hero-media img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(13,24,43,.16); }
.lp-hero-media figcaption { position: relative; margin: 15px 0 0; color: #697386; font-size: .76rem; letter-spacing: .04em; }
.lp-intro,
.lp-detail,
.lp-faq,
.lp-related { padding: 94px 0; }
.lp-reading { max-width: 900px; }
.lp-reading h2,
.lp-detail h2,
.lp-system h2,
.lp-related h2,
.lp-proof h2,
.lp-cta h2 { margin: 13px 0 22px; color: var(--secondary); }
.lp-reading > p { margin: 0; color: #4d5869; font-size: 1.12rem; line-height: 1.85; }
.lp-system { padding: 88px 0; background: var(--secondary); color: #fff; }
.lp-system h2 { color: #fff; }
.lp-path { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; border: 1px solid rgba(255,255,255,.15); }
.lp-path article { position: relative; min-height: 230px; padding: 34px; border-right: 1px solid rgba(255,255,255,.15); }
.lp-path article:last-child { border-right: 0; }
.lp-path article:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 39px; right: -13px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--primary); background: var(--secondary); }
.lp-path article > span { color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .14em; }
.lp-path h3 { margin: 37px 0 12px; color: #fff; }
.lp-path p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.7; }
.lp-detail { background: #f7f8fa; }
.lp-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(50px, 8vw, 110px); }
.lp-checks,
.lp-scope { margin: 30px 0 0; padding: 0; list-style: none; }
.lp-checks li { position: relative; padding: 17px 0 17px 32px; border-top: 1px solid #dfe3e8; color: #374254; line-height: 1.55; }
.lp-checks li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 9px; height: 9px; background: var(--primary); transform: rotate(45deg); }
.lp-scope { counter-reset: lp-scope; }
.lp-scope li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 13px 0; color: #374254; line-height: 1.5; }
.lp-scope li span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(232,93,4,.35); border-radius: 50%; color: var(--primary); font-size: .72rem; font-weight: 800; }
.lp-proof { padding: 68px 0; background: #fff4eb; border-block: 1px solid #f2d9c7; }
.lp-proof-inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.lp-proof h2 { margin-bottom: 0; }
.lp-proof p { margin: 0; color: #4e5969; line-height: 1.8; }
.lp-faq details { border-top: 1px solid var(--border); }
.lp-faq details:last-child { border-bottom: 1px solid var(--border); }
.lp-faq summary { cursor: pointer; padding: 24px 40px 24px 0; color: var(--secondary); font-size: 1.05rem; font-weight: 750; list-style: none; position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 5px; color: var(--primary); font-size: 1.35rem; }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: -5px 0 24px; color: #536072; line-height: 1.75; }
.lp-related { background: #f7f8fa; }
.lp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 31px; }
.lp-related-grid a { min-height: 190px; display: flex; flex-direction: column; padding: 27px; background: #fff; border: 1px solid var(--border); color: var(--secondary); transition: border-color var(--transition), transform var(--transition); }
.lp-related-grid a:hover { transform: translateY(-3px); border-color: var(--primary); }
.lp-related-grid span { color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.lp-related-grid strong { margin-top: 30px; font-family: 'Plus Jakarta Sans', var(--font); font-size: 1.2rem; line-height: 1.3; }
.lp-related-grid small { margin-top: auto; color: #687386; font-size: .78rem; font-weight: 700; }
.lp-cta { padding: 68px 0; background: #1D3A72; color: #fff; }
.lp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.lp-cta h2 { margin: 8px 0 10px; color: #fff; }
.lp-cta p { max-width: 730px; margin: 0; color: rgba(255,255,255,.72); }
.lp-cta span { color: #ffb077; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lp-cta .btn span { color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.sol-modal-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sol-modal-features li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  color: var(--secondary);
  line-height: 1.4;
}
.sol-modal-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.sol-modal-pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid #E2E8F0;
}
.sol-modal-pills span {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #F0F2F5;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.sol-modal-pills span:hover { background: var(--primary); color: var(--white); }

.sol-modal-media {
  grid-area: media;
  width: 100%;
  max-height: 390px;
  align-self: center;
  justify-self: center;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
.sol-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 760px) {
  .sol-modal {
    padding-top: 4.25rem;
  }
  .sol-modal-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media"
      "pills";
  }
  .sol-modal-media {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
  .sol-modal-pills {
    justify-content: flex-start;
  }
}

/* ===== SHARED CONCENTRIC HEX RINGS (hexr-) =====
   The two-tone stroked ring motif from the Project Process section,
   continued across Certifications, Solutions and the closing CTA.
   Each ring is cropped by its section edge at a different amount. */
.certs-section,
.solutions-section,
.fcta {
  --pp-hex-orange: #EA580C;
  --pp-hex-navy: #1E3A5F;
}
.hexr {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
}
.hexr--certs-1 { top: -280px;   right: -320px; width: 620px; }
.hexr--certs-2 { bottom: -180px; left: -170px; width: 400px; }
.hexr--sol-1   { top: -260px;   left: -300px;  width: 560px; }
.hexr--sol-2   { bottom: -240px; right: -260px; width: 460px; }
.hexr--fcta-1  { top: -220px;   left: -230px;  width: 480px; }
.hexr--fcta-2  { bottom: -260px; right: -250px; width: 520px; }

.certs-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 80px;               /* navbar gutters */
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(3.5rem, 6vw, 6.5rem);
  align-items: start;
}

/* ── Left column ── */
.certs-main h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary);
  margin: 0 0 1.25rem;
}
.certs-eyebrow { margin-bottom: 0.85rem; }
.certs-main > p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 2.75rem;
}

/* Three A4 thumbnails */
.certs-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.9rem;
}
.certs-thumb {
  padding: 0;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 210 / 297;       /* A4 portrait, like real certificates */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.certs-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.certs-thumb:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10); }
.certs-thumb.is-active { border-color: var(--primary); }

/* Prev/next — white outline + orange filled, centred under thumbs */
.certs-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin-top: 3.25rem;
}
.certs-arrow {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  background: #fff;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.certs-arrow svg { width: 20px; height: 20px; }
.certs-arrow:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }
.certs-arrow--next {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 96, 18, 0.35);
}
.certs-arrow--next:hover { background: #e5560f; color: #fff; }

/* ── Right: large featured certificate on an offset white caption card ── */
.certs-feature {
  position: relative;
  /* keep the offset white card (extends 30px right of the image)
     inside the section's 80px gutter */
  margin: 0 40px 0 0;
  width: 100%;
  max-width: 380px;
  justify-self: end;
}
/* the white card behind — offset down and outward, caption sits in it */
.certs-feature::before {
  content: '';
  position: absolute;
  top: 46%;
  left: -26px;
  right: -30px;
  bottom: -34px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 55px rgba(20, 30, 60, 0.10);
  z-index: 0;
}
.certs-feature img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  object-position: top;
  display: block;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 10px 28px rgba(20, 30, 60, 0.10);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.certs-feature figcaption {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.75rem 0.5rem 0.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: #1A1A2E;
  letter-spacing: 0.01em;
}
/* 300ms crossfade when the featured cert swaps */
.certs-feature.is-swapping img { opacity: 0; transform: translateY(6px); }

/* Mobile certificate list is enabled only by the responsive stylesheet. */
.certs-mobile-list { display: none; }
.certs-mobile-item {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe2eb;
  border-radius: 10px;
  background: #ffffff;
  color: var(--secondary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(20, 30, 60, 0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.certs-mobile-item:hover {
  border-color: rgba(232, 93, 4, 0.48);
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(20, 30, 60, 0.1);
}
.certs-mobile-item:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.35);
  outline-offset: 3px;
}
.certs-mobile-sheet {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-bottom: 1px solid #e3e8ef;
  background:
    repeating-linear-gradient(135deg, #ffffff 0 13px, #f4f6f8 13px 26px);
}
.certs-mobile-sheet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.certs-mobile-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  color: #627086;
  text-align: center;
}
.certs-mobile-placeholder svg {
  width: 32px;
  height: 32px;
  color: #1d3a72;
}
.certs-mobile-placeholder span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.certs-mobile-item.is-missing .certs-mobile-sheet img { display: none; }
.certs-mobile-item.is-missing .certs-mobile-placeholder { display: flex; }
.certs-mobile-caption {
  display: block;
  min-height: 52px;
  padding: 0.75rem 0.8rem;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Full-screen viewer used by the mobile certificate list. */
.certs-viewer {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 4.5rem 1rem 1.25rem;
  background: rgba(5, 15, 32, 0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.certs-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.certs-viewer-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 760px);
  min-height: 0;
}
.certs-viewer-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: #c94d00;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.certs-viewer-close svg { width: 21px; height: 21px; }
.certs-viewer-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}
.certs-viewer-document {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  flex: 1;
}
.certs-viewer-document img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9.5rem);
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}
.certs-viewer-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(100%, 420px);
  aspect-ratio: 210 / 297;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    repeating-linear-gradient(135deg, #ffffff 0 18px, #f2f4f7 18px 36px);
  color: #526176;
  text-align: center;
}
.certs-viewer-fallback[hidden] { display: none; }
.certs-viewer-fallback svg { width: 48px; height: 48px; color: #1d3a72; }
.certs-viewer-fallback span { font-size: 0.9rem; font-weight: 700; }
.certs-viewer-dialog > p {
  margin: 0.9rem 0 0;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .certs-viewer,
  .certs-mobile-item { transition: none; }
}

/* Placeholder shown until real cert images are added */
.certs-thumb img.cert-missing,
.certs-feature img.cert-missing {
  background:
    repeating-linear-gradient(45deg, #f7f7f7, #f7f7f7 12px, #efefef 12px, #efefef 24px) !important;
}

/* ===== FEATURES CARDS ===== */
.features-section {
  padding: 0.75rem 0 5.5rem;
  background: transparent;   /* follow the global page background (white) */
}
/* Full-bleed container matching the navbar's 80px inset (NOT the 1200px .container) */
.features-container {
  max-width: 100%;
  padding: 0 80px;
  margin: 0 auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.25rem;
}

/* Card — instant color flip on hover (no wash animation). Only the lift
   and the arrow rotation are animated. */
.feature-card {
  position: relative;
  background: #EFF1F5;       /* match the stats card's off-white fill */
  border: 1px solid #E2E8F0; /* match the stats card border */
  border-radius: 12px;
  padding: 2.5rem 2.25rem 3rem;
  min-height: 380px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.35s ease, border-color 0.35s ease;
}
.feature-card:hover {
  background: #1D3A72;
  border-color: #1D3A72;
  transform: translateY(-6px);
}

/* Icon — instant white on hover */
.feature-icon {
  width: 48px;
  height: 48px;
  color: #1D3A72;
  margin-bottom: 1.75rem;
}
.feature-icon svg { width: 100%; height: 100%; display: block; }
.feature-card:hover .feature-icon { color: #fff; }

/* Divider — line stops short, filled grey dot at the right end */
.feature-divider {
  height: 12px;
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
}
.feature-divider-line {
  flex: 1;
  height: 1px;
  background: #d5dae1;
  margin-right: 8px;
}
.feature-divider-dot {
  width: 8px;
  height: 8px;
  background: #c4cad3;
  border-radius: 50%;
  flex-shrink: 0;
}
.feature-card:hover .feature-divider-line { background: rgba(255,255,255,0.5); }
.feature-card:hover .feature-divider-dot { background: rgba(255,255,255,0.9); }

/* Title — instant white on hover */
.feature-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.22;
  color: #1A1A2E;
  margin: 0 0 1.1rem;
}
.feature-card:hover .feature-title { color: #fff; }

/* Body text — instant white on hover */
.feature-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #64748B;
  margin: 0;
}
.feature-card:hover .feature-text { color: rgba(255,255,255,0.96); }

/* Arrow — bare bold arrow in the bottom-right corner. No circle, no background.
   Orange by default, white on hover; rotates ↗ → ↑ (the only animated part). */
.feature-arrow {
  position: absolute;
  right: 1.6rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1D3A72;
}
.feature-arrow svg {
  width: 26px;
  height: 26px;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature-card:hover .feature-arrow { color: #fff; }   /* instant color flip */
.feature-card:hover .feature-arrow svg {
  transform: rotate(-45deg);   /* rest → (0°) rotates up to ↗ (45°) on hover — animated */
}

/* ===== STATS / RESULTS SECTION ===== */
.results-section {
  position: relative;
  z-index: 1;
  /* Match the navbar's 80px side gutters so the card aligns with it.
     Small bottom padding so the feature cards read as part of the same block. */
  padding: 5rem 80px 1.5rem;
  /* Plain white page — the stats live inside a contained card, not a full band */
  background: #ffffff;
  overflow: hidden;
}
/* The stats card: rounded off-white box spanning the navbar's content width */
.results-section .features-container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  background: #EFF1F5;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 3.5rem 3.25rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

/* Header row: heading/subtext on the left, buttons on the right */
.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.5rem;
}
.results-head-text { max-width: 620px; }
/* Section heading in near-black to read on the light background */
.results-head-text h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A2E;
  margin: 0 0 0.85rem;
}
.results-head-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* Buttons */
.results-head-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.results-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* Ghost — blue outline that reads on the light panel */
.results-btn--ghost {
  background: transparent;
  color: #1D3A72;
  border: 1.5px solid rgba(29, 58, 114, 0.35);
}
.results-btn--ghost:hover {
  background: #1D3A72;
  color: #fff;
  border-color: #1D3A72;
  transform: translateY(-2px);
}
.results-btn-icon { display: inline-flex; color: #1D3A72; }
.results-btn--ghost:hover .results-btn-icon { color: #fff; }
.results-btn-icon svg { width: 20px; height: 20px; display: block; }
/* Primary — solid orange CTA */
.results-btn--dark {
  background: var(--primary);
  color: #fff;
  border: 1.5px solid var(--primary);
  box-shadow: 0 8px 22px rgba(255, 96, 18, 0.32);
}
.results-btn--dark:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 96, 18, 0.42);
}

/* Stats grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
.result-item {
  position: relative;
  padding-top: 1.4rem;
  cursor: default;
  transition: transform 0.25s ease;
}
/* Subtle lift on hover */
.result-item:hover { transform: translateY(-3px); }
.result-num { transition: color 0.25s ease; }
/* Number shifts blue -> orange while hovering the stat */
.result-item:hover .result-num { color: var(--primary); }
/* Short orange accent bar above each stat */
.result-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--primary);
}
.result-num {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: #1D3A72;            /* official brand blue — the hero of each stat */
  letter-spacing: -1.5px;
  margin-bottom: 0.9rem;
}
.result-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1A1A2E;            /* near-black */
  margin-bottom: 0.55rem;
}
.result-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #64748B;            /* muted body grey */
  margin: 0;
  max-width: 300px;
}

/* ============================================================
   CONTACT — edge-to-edge split panel
   Deep-blue info side (dot-grid signature, like Trust) hard against
   a light form side. No rounded outer container — full bleed.
   ============================================================ */
.contact-section { background: var(--white); }
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  min-height: 620px;
}

/* Left — deep-blue info panel */
.contact-info {
  position: relative;
  background: var(--secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem) clamp(24px, 6vw, 6rem);
  overflow: hidden;
}
/* Dot-grid texture in the corner — matches the Trust panel signature */
.contact-info::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 240px; height: 240px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.16) 1.5px, transparent 1.8px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
}
/* Warm ember glow bottom-left */
.contact-info::after {
  content: '';
  position: absolute;
  left: -15%; bottom: -25%;
  width: 55%; height: 70%;
  background: radial-gradient(circle, rgba(255,96,18,0.22), transparent 62%);
  pointer-events: none;
}
.contact-info-inner { position: relative; z-index: 1; max-width: 420px; }
.contact-info .section-tag {
  background: rgba(255, 96, 18, 0.16);
  color: #FF8A52;
  margin-bottom: 1.25rem;
}
.contact-info h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.contact-info > .contact-info-inner > p {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 2.25rem;
}
.contact-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.5;
}
.contact-info-list a { color: rgba(255,255,255,0.9); transition: color 0.2s ease; }
.contact-info-list a:hover { color: #FF8A52; }
.contact-info-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #FF8A52;
  border-radius: 11px;
}
.contact-info-icon svg { width: 20px; height: 20px; }

/* Right — form panel */
.contact-form-panel {
  background: #F4F5F7;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(24px, 5vw, 5rem);
}
.contact-form-inner { width: 100%; max-width: 520px; }
.contact-form-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 1.75rem;
}
.contact-form .req { color: var(--primary); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* ============================================================
   FOOTER — certification badges row
   ============================================================ */
.footer-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.75rem 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-badges-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  flex-shrink: 0;
}
.footer-badges-row { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.footer-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.footer-badge:hover { border-color: rgba(255,96,18,0.5); color: #fff; }


/* ============================================================
   FEATURED WORK — six-project image grid
   Full-bleed project photography with a restrained information
   overlay and one clear route into the complete project archive.
   ============================================================ */
.work-section { background: var(--white); }
.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}
.work-head h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0.75rem 0 0;
}
.work-head-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--secondary);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--secondary);
  transition: color 0.22s ease, border-color 0.22s ease, gap 0.22s ease;
}
.work-head-link:hover { color: var(--primary); border-color: var(--primary); gap: 12px; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  min-height: 0;
}

.work-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  min-height: 360px;
  box-shadow: 0 4px 20px rgba(20,30,60,0.08);
  isolation: isolate;
}
.work-card-media { position: absolute; inset: 0; }
.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
}
.work-card:hover .work-card-media img { transform: scale(1.06); }
/* Gradient scrim so text stays legible over any photo */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,28,50,0) 30%, rgba(20,28,50,0.55) 70%, rgba(16,22,42,0.92) 100%);
  z-index: 1;
  transition: background 0.4s ease;
}
.work-card:hover::after {
  background: linear-gradient(180deg, rgba(20,28,50,0.05) 20%, rgba(20,28,50,0.6) 60%, rgba(16,22,42,0.95) 100%);
}

.work-card-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem;
}
.work-chip {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
}
.work-card .work-card-text h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.work-card-text p {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
  max-width: 44ch;
  /* Description tucked away, revealed on hover */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin 0.45s ease;
}
.work-card:hover .work-card-text p { max-height: 6rem; opacity: 1; }
.work-card-loc {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
}
.work-footer {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.work-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 50px;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: var(--primary);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.work-all-btn span { transition: transform 0.22s ease; }
.work-all-btn:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.work-all-btn:hover span { transform: translateX(3px); }
.work-all-btn:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.28);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .work-card-text p { max-height: 6rem; opacity: 1; transition: none; }
  .work-all-btn,
  .work-all-btn span { transition: none; }
}

/* ============================================================
   CLIENT VOICES — color-blocked band with a signature quote mark
   Deep-blue panel; one oversized featured testimonial anchored by
   a giant orange quotation mark; two compact quotes alongside.
   ============================================================ */
.voices-section {
  position: relative;
  background: var(--secondary);
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  overflow: hidden;
}
.voices-section::before {
  content: '';
  position: absolute;
  top: -20%; left: -8%;
  width: 45%; height: 80%;
  background: radial-gradient(circle, rgba(255,96,18,0.12), transparent 60%);
  pointer-events: none;
}
.voices-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  /* match the navbar's 80px gutters (was max-width: var(--max-content) — never defined) */
  padding: 0 80px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

/* Featured quote */
.voices-feature { position: relative; }
.voices-feature .section-tag {
  background: rgba(255, 96, 18, 0.16);
  color: #FF8A52;
  margin-bottom: 1.5rem;
}
/* The signature: an oversized quotation mark bleeding behind the text */
.voices-mark {
  position: absolute;
  top: -2.5rem;
  left: -1rem;
  font-family: var(--font-heading);
  font-size: 11rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.18;
  pointer-events: none;
}
.voices-quote {
  position: relative;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}
.voices-author { display: flex; align-items: center; gap: 1rem; }
.voices-avatar {
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.voices-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
.voices-role { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 2px; }

/* Supporting quotes */
.voices-support { display: grid; gap: 1.25rem; }
.voices-mini {
  margin: 0;
  padding: 1.5rem 1.6rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.voices-mini:hover { background: rgba(255,255,255,0.08); transform: translateX(4px); }
.voices-stars { color: #FFB27A; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 0.75rem; }
.voices-mini blockquote {
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.98rem;
  line-height: 1.6;
}
.voices-mini figcaption { display: flex; flex-direction: column; gap: 1px; }
.voices-mini-name { color: #fff; font-weight: 700; font-size: 0.92rem; }
.voices-mini-role { color: rgba(255,255,255,0.55); font-size: 0.82rem; }

/* ============================================================
   ABOUT PAGE — reference-based layout
   Split hero + full-width photo, mission with pill rail and bold
   lead-ins, three tinted delivery cards, deep-blue team band,
   logo-chip strip, and a closing photo row + CTA.
   ============================================================ */

/* ── Hero ── */
.ab-hero {
  background: var(--white);
  padding: 10rem 0 1.5rem;
}
.ab-hero .breadcrumb { margin-bottom: 2rem; }
.ab-hero-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: 2.5rem;
}
.ab-hero-top h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0;
}
.ab-hero-intro p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.ab-hero-media {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  overflow: hidden;
}
.ab-hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 38% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(4, 8, 18, 0.34));
  pointer-events: none;
}
.ab-hero-media img {
  width: 100%;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  display: block;
}
.ab-hero-media .ab-hero-team-photo {
  object-position: center 64%;
}

/* ── Mission ── */
.ab-mission { background: var(--white); padding: 3rem 0 5.5rem; }
.ab-mission-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.ab-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
.ab-pill {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ab-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 96, 18, 0.28);
}
.ab-mission-body h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 1rem;
}
.ab-mission-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 58ch;
}
.ab-mission-body p { color: var(--text-muted); line-height: 1.7; max-width: 62ch; margin-bottom: 1rem; }
.ab-mission-body p strong { color: var(--secondary); font-weight: 700; }

/* ── What we deliver — tinted cards ── */
.ab-solve { background: var(--white); padding: 2rem 0 5.5rem; }
.ab-solve-head { margin-bottom: 2.5rem; }
.ab-solve-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 0.6rem;
}
.ab-solve-head p { color: var(--text-muted); max-width: 52ch; margin: 0; }
.ab-solve-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ab-card {
  border-radius: 14px;
  padding: 2rem 1.75rem 2.5rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ab-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20, 30, 60, 0.10); }
.ab-card--orange { background: #FFE6DA; }
.ab-card--blue   { background: #E8EDF5; }
.ab-card--grey   { background: #F4F5F7; }
.ab-card-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.75);
  color: var(--secondary);
  margin-bottom: 1.25rem;
}
.ab-card-icon svg { width: 24px; height: 24px; }
.ab-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 auto;
  padding-bottom: 2.5rem;
}
.ab-card p { color: var(--text); font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* ── Team band ── */
.ab-team {
  background-color: #09111D;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, #05080D 0%, #091421 52%, #14263A 100%);
  background-size: 48px 48px, 48px 48px, auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.ab-team-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.ab-team-intro h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.ab-team-intro p { color: rgba(255, 255, 255, 0.76); line-height: 1.7; margin: 0; }
.ab-team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1.25rem;
}
.ab-member-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(145deg, #2E4F8C, #152A52);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 32px rgba(5, 16, 34, 0.24);
  margin-bottom: 0.8rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ab-member:hover .ab-member-photo {
  transform: translateY(-4px);
  border-color: rgba(232, 93, 4, 0.5);
  box-shadow: 0 18px 38px rgba(5, 16, 34, 0.3);
}
.ab-member-name { color: var(--white); font-weight: 700; font-size: 0.98rem; }
.ab-member-role { color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; margin-top: 2px; }

/* ── Pan India presence ── */
.abp-presence {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}
.abp-presence::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1D3A72;
  opacity: 0.04;
  -webkit-mask-image: url("../assets/images/about/presence/world-map.png?v=20260725");
  mask-image: url("../assets/images/about/presence/world-map.png?v=20260725");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  pointer-events: none;
}
.abp-presence .container {
  position: relative;
  z-index: 1;
}
.abp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
}
.abp-map-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(640px, 50vw, 800px);
  overflow: hidden;
}
.abp-india-map {
  width: min(100%, 620px);
  max-width: none;
  height: auto;
}
.abp-copy {
  max-width: 500px;
}
.abp-eyebrow {
  color: #1D3A72;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.abp-copy h2 {
  color: var(--primary);
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
  margin: 0;
}
.abp-since {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #1D3A72;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.5rem 0 2.25rem;
}
.abp-since::before {
  content: "";
  width: 42px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--primary);
}
.abp-summary {
  max-width: 470px;
  color: var(--text);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(29, 58, 114, 0.2);
}
.abp-summary strong {
  color: var(--secondary);
  font-weight: 800;
}

/* ── Logo strip ── */
.ab-logos {
  background: #F4F5F7;
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  text-align: center;
}
.ab-logos h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 2.5rem;
}
.ab-logos-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.ab-logo-chip {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 30, 60, 0.07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
}
.ab-logo-chip:hover { transform: translateY(-4px); color: var(--secondary); }

/* ── Built to protect at scale ── */
.ab-scale { background: var(--white); padding: clamp(4rem, 7vw, 6rem) 0; }
.ab-scale-head { text-align: center; margin-bottom: 2.5rem; }
.ab-scale-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 0.6rem;
}
.ab-scale-head p { color: var(--text-muted); max-width: 54ch; margin: 0 auto; }
.ab-scale-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2.75rem;
}
.ab-scale-photos img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 5;
}
/* stagger: middle photos sit slightly lower, like the reference */
.ab-scale-photos img:nth-child(2),
.ab-scale-photos img:nth-child(3) { margin-top: 1.75rem; aspect-ratio: 4 / 4.4; }
.ab-scale-cta { text-align: center; }

/* ============================================================
   SERVICES PAGE — hero, industries scroller, six L/R banners
   ============================================================ */

/* ── Hero ── */
.sv-hero {
  background: var(--white);
  /* 114px fixed header + breathing room */
  padding: 10rem 0 3.5rem;
  text-align: center;
}
.sv-hero .breadcrumb { justify-content: center; margin-bottom: 1.75rem; }
.sv-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0 0 1.1rem;
}
/* Hero keyword. The orange baseline underline was removed at all breakpoints;
   the word now renders exactly like the rest of the heading. The spans are
   kept in the markup so the keyword stays available for future styling. */
.sv-hl,
.pj-hero-accent {
  display: inline;
  color: inherit;
}
.sv-hero p {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 64ch;
  margin: 0 auto;
}

/* ── Industries scroller ── */
.sv-industries {
  background: var(--white);
  padding: 0.75rem 0 clamp(3rem, 4.5vw, 4rem);
  overflow: hidden;
}
.sv-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sv-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: sv-scroll 32s linear infinite;   /* no-JS fallback; JS drives it */
}
@keyframes sv-scroll { to { transform: translateX(-50%); } }
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1.65rem 2.4rem;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--secondary);
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.06);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sv-chip-ic {
  width: 26px;
  height: 26px;
  color: var(--primary);
  flex-shrink: 0;
  transition: color 0.25s ease;
}
/* hover: orange pill, everything inside goes white */
.sv-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.sv-chip:hover .sv-chip-ic { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .sv-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .sv-track [aria-hidden="true"] { display: none; }
}

/* ── Six alternating service banners ── */
.sv-detail { background: var(--white); padding: clamp(4rem, 6vw, 5.5rem) 0; }
.sv-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
/* full-bleed separator between consecutive services */
.sv-row + .sv-row {
  margin-top: clamp(4rem, 7vw, 6.5rem);
  padding-top: clamp(4rem, 7vw, 6.5rem);
}
.sv-row + .sv-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 2px solid #C8D0DB;
}
/* alternate: even rows put the image on the left */
.sv-row:nth-child(even) .sv-media { order: -1; }

.sv-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #FFE6DA;
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.sv-icon svg { width: 30px; height: 30px; }
.sv-text h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.15;
  margin: 0 0 0.9rem;
}
.sv-sub {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 1.5rem;
}
.sv-pills { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 0; }
.sv-pill {
  position: relative;
  z-index: 1;
  background: #E8EDF5;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
  transform-origin: bottom center;
  will-change: transform;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sv-pill:hover {
  z-index: 3;
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(232, 93, 4, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  .sv-pill:hover {
    transform: translateY(-4px) scale(1.1);
  }
  .sv-pill:has(+ .sv-pill:hover),
  .sv-pill:hover + .sv-pill {
    z-index: 2;
    transform: translateY(-1px) scale(1.035);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-pill { transition: background 0.2s ease, color 0.2s ease; }
  .sv-pill:hover,
  .sv-pill:has(+ .sv-pill:hover),
  .sv-pill:hover + .sv-pill {
    transform: none;
  }
}
.sv-features {
  background: #F4F5F7;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}
.sv-features-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0 0 0.9rem;
}
.sv-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.sv-features li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.5;
}
.sv-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.sv-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
}

/* ============================================================
   CLIENTELE PAGE — trust split, leader tiles, success story,
   dual-direction site gallery
   ============================================================ */

/* ── Building trust since 2003 ── */
.cl-trust { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.cl-trust-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.cl-trust-grid h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0.75rem 0 0;
}
.cl-trust-body p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.75rem;
}
.cl-trust-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.cl-stat { display: flex; flex-direction: column; }
.cl-stat-num {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.1;
}
.cl-stat-label { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }

/* ── Client logos — 4×3 grid, zoom on hover ── */
.cl-logos { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.cl-logos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.cl-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1.25rem 1rem;
  background: #F4F5F7;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cl-logo img,
.cl-logo-mark {
  transition: transform 0.3s ease;
}
.cl-logo:hover img,
.cl-logo:hover .cl-logo-mark {
  transform: scale(1.12);
}
.cl-logo img {
  max-width: 70%;
  max-height: 56px;
  object-fit: contain;
}
.cl-logo-mark {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #8B93A3;
  text-align: center;
}

/* ── Success story ── */
.cl-story { background: #F4F5F7; padding: clamp(4rem, 6vw, 5.5rem) 0; }
.cl-story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.cl-story-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.15;
  margin: 0.75rem 0 1rem;
}
.cl-story-text p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; max-width: 58ch; }
.cl-story-results { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 1.75rem; }
.cl-story-results span {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 999px;
}
.cl-story-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
}

/* ── Site gallery — dual-direction marquee ── */
.cl-gallery {
  background: var(--white);
  padding: clamp(3.5rem, 6vw, 5rem) 0;
  overflow: hidden;
}
.cl-gallery .section-header { margin-bottom: 2.5rem; }
.cl-gallery-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cl-gallery-band + .cl-gallery-band { margin-top: 1.25rem; }
.cl-gallery-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
}
.cl-gallery-track img {
  width: 300px;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* top row drifts right, bottom row drifts left */
.cl-gallery-track--right { animation: cl-scroll-right 45s linear infinite; }
.cl-gallery-track--left  { animation: cl-scroll-left 45s linear infinite; }
@keyframes cl-scroll-left  { to { transform: translateX(-50%); } }
@keyframes cl-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .cl-gallery-track { animation: none !important; }
  .cl-gallery-track [aria-hidden="true"] { display: none; }
  .cl-gallery-track { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ============================================================
   PROJECT GALLERY — premium editorial project grid (pj-gallery)
   Immersive image cards, glass service badge, name below.
   Asymmetric 12-col rhythm; refined shadows + hover.
   ============================================================ */
.pj-gallery {
  background: var(--white);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;   /* match the QA section rhythm */
}
/* header + filter read as one unit (tight), then one calm gap to the grid */
.pj-gallery .section-header { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }

/* ── Quick filter — premium glass chips ── */
.pj-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto clamp(2.25rem, 3.5vw, 3rem);
}
.pj-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
  color: var(--secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-chip:hover {
  border-color: rgba(30, 58, 95, 0.35);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.pj-chip:active { transform: translateY(0) scale(0.97); }
.pj-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* count pill inside chip */
.pj-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
/* active state — premium navy fill + orange-tinted count */
.pj-chip.is-active {
  background: #1E3A5F;
  border-color: #1E3A5F;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.28);
  transform: none;
}
.pj-chip.is-active:hover { transform: translateY(-1px); }
.pj-chip.is-active .pj-chip-count {
  background: var(--primary);
  color: var(--white);
}

/* ── Card filter transitions ── */
.pj-gallery-card {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-gallery-card.is-hidden {
  display: none;
}
.pj-gallery-card.is-entering {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .pj-chip,
  .pj-gallery-card { transition: none; }
  .pj-gallery-card.is-entering { opacity: 1; transform: none; }
}

/* uniform 4-across grid — every card the same size */
.pj-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.2vw, 2rem);
}

.pj-gallery-card {
  display: flex;
  flex-direction: column;
}

/* clean media surface — refined single-system shadow */
.pj-gallery-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef1f5;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px -10px rgba(15, 23, 42, 0.18);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* refined lift on hover */
.pj-gallery-card:hover .pj-gallery-media {
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.05),
    0 26px 50px -14px rgba(15, 23, 42, 0.26);
}
.pj-gallery-card:hover .pj-gallery-media img { transform: scale(1.06); }

/* category badge — solid brand pill, legible on any photo (top-left anchor) */
.pj-gallery-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: #1E3A5F;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}
/* orange brand dot — the one saturated point of the badge */
.pj-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* metadata block below the image — name over location, one clean stack */
.pj-gallery-foot {
  margin-top: 0.95rem;
  padding: 0 0.15rem;
}
.pj-gallery-name {
  margin: 0 0 0.3rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--secondary);
}
.pj-gallery-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pj-gallery-loc svg { color: var(--primary); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .pj-gallery-media,
  .pj-gallery-media img,
  .pj-gallery-card:hover .pj-gallery-media,
  .pj-gallery-card:hover .pj-gallery-media img {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   BLOG POST TEMPLATE (bp-)
   ============================================================ */
.bp-body { background: var(--white); }

/* ── Top bar ── */
.bp-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.bp-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
}
.bp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--secondary);
  transition: color 0.2s ease;
}
.bp-back:hover { color: var(--primary); }
.bp-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #F4F5F7;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  min-width: 260px;
  color: var(--text-muted);
}
.bp-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--secondary);
  width: 100%;
}
.bp-search input::placeholder { color: var(--text-muted); }

/* ── Two-column shell ── */
.bp-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  padding: 2.5rem 0 4.5rem;
}
.bp-main { padding-right: clamp(1.75rem, 4vw, 3rem); min-width: 0; }
.bp-side {
  border-left: 1px solid var(--border);
  padding-left: clamp(1.75rem, 4vw, 3rem);
}

/* ── Article header ── */
.bp-title {
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.25;
  margin-bottom: 1rem;
}
.bp-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
.bp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bp-author-name { font-weight: 600; color: var(--secondary); }
.bp-meta-dot { color: var(--text-muted); }

.bp-hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.9rem;
}
.bp-hero-img[src*="bess-fire-safety-india"] {
  aspect-ratio: 1;
  object-fit: contain;
}

/* ── Article typography ── */
.bp-dateline {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--secondary);
  margin-bottom: 0.9rem;
}
.bp-article p {
  font-size: 0.975rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.bp-article h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 1.9rem 0 0.75rem;
}
.bp-article h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 1.4rem 0 0.6rem;
}
.bp-article ul,
.bp-article ol {
  padding-left: 1.35rem;
  margin-bottom: 1.25rem;
  display: grid;
  gap: 0.4rem;
}
.bp-article li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.bp-article li strong { color: var(--secondary); }
.bp-article a { color: var(--primary); font-weight: 600; }
.bp-article a:hover { text-decoration: underline; }
.bp-article blockquote {
  border-left: 3px solid var(--primary);
  background: #F4F5F7;
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.bp-article blockquote p {
  font-style: italic;
  color: var(--secondary);
  margin-bottom: 0.35rem;
}
.bp-article blockquote cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Engagement bar ── */
.bp-engage {
  position: sticky;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-top: 2.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
.bp-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
}
.bp-stat svg { color: var(--text-muted); flex-shrink: 0; }
.bp-comment-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.bp-comment-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: #F4F5F7;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--secondary);
}
.bp-comment-box input::placeholder { color: var(--text-muted); }
.bp-send {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bp-send:hover { background: var(--primary); transform: scale(1.06); }

/* ── Sidebar ── */
.bp-side-block { margin-bottom: 2.5rem; }
.bp-side-block:last-child { margin-bottom: 0; }
.bp-side-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1.1rem;
}
.bp-share-row { display: flex; gap: 0.65rem; }
.bp-share {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bp-share:hover {
  color: var(--primary);
  border-color: rgba(255, 96, 18, 0.5);
  transform: translateY(-2px);
}
/* the copy-link control is a <button>, so it needs the element reset */
button.bp-share {
  background: transparent;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
button.bp-share.is-copied {
  color: var(--white);
  background: #1D3A72;
  border-color: #1D3A72;
}

/* ── Breadcrumb + tags on the article page ── */
.bp-crumb {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}
.bp-crumb:hover { text-decoration: underline; }
.bp-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.bp-tags-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.bp-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  background: #F0F2F5;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.bp-tag:hover { background: var(--primary); color: var(--white); }

/* ── Pull quote + figure inside article body ── */
.bp-quote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--primary);
  background: #FAFBFC;
  border-radius: 0 12px 12px 0;
}
.bp-quote p {
  margin: 0;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--secondary);
}
.bp-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
}
.bp-figure { margin: 2rem 0; }
.bp-figure img { width: 100%; border-radius: 12px; display: block; }
.bp-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Accessible article data tables ── */
.bp-table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.bp-table-wrap:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.28);
  outline-offset: 3px;
}
.bp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.bp-table caption {
  padding: 1rem 1.1rem;
  color: var(--secondary);
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bp-table th,
.bp-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.bp-table thead th {
  color: var(--white);
  background: #1D3A72;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.bp-table tbody th { color: var(--secondary); font-weight: 700; }
.bp-table tbody tr:last-child > * { border-bottom: 0; }
.bp-table tbody tr:nth-child(even) { background: #F8FAFC; }

/* ── Article FAQs ── */
.bp-faq { margin-top: 2.4rem; }
.bp-faq-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.bp-faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.bp-faq-item h3 { margin: 0 0 0.45rem; }
.bp-faq-item p { margin-bottom: 0; }

/* ── Article not found ── */
.bp-missing {
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
}
.bp-missing h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--secondary); margin: 0 0 0.75rem; }
.bp-missing p  { color: var(--text-muted); margin: 0 0 1.75rem; }

.bp-rel { display: grid; gap: 1.15rem; }
.bp-rel-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0.9rem;
  align-items: start;
}
.bp-rel-item img {
  width: 112px;
  height: 78px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.25s ease;
}
.bp-rel-item:hover img { transform: scale(1.04); }
.bp-rel-body { display: block; }
.bp-rel-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.4;
  transition: color 0.2s ease;
}
.bp-rel-item:hover .bp-rel-title { color: var(--primary); }
.bp-rel-cat {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ============================================================
   BLOG LIST PAGE (bl-)
   ============================================================ */

/* ── Hero ── */
.bl-hero {
  background: var(--white);
  text-align: center;
  padding: 10rem 0 clamp(2rem, 4vw, 3rem);
}
.bl-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}
.bl-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.9rem;
}
.bl-hero p {
  max-width: 620px;
  margin: 0 auto 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.bl-search {
  position: relative;          /* anchors the suggestion dropdown */
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  width: min(560px, 100%);
  color: var(--text-muted);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.bl-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 6px 22px rgba(232, 93, 4, 0.14);
}
.bl-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--secondary);
}
.bl-search input::placeholder { color: var(--text-muted); }
.bl-search-btn {
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.35rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bl-search-btn:hover { background: var(--secondary); transform: translateY(-1px); }

/* ── Live search suggestions ── */
.bl-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  text-align: left;
  max-height: 380px;
  overflow-y: auto;
}
.bl-suggest-item {
  display: block;
  padding: 0.8rem 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid #eef0f3;
  transition: background 0.15s ease;
}
.bl-suggest-item:last-child { border-bottom: 0; }
.bl-suggest-item:hover,
.bl-suggest-item.is-active { background: #F6F7F9; }
.bl-suggest-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--secondary);
  line-height: 1.4;
}
.bl-suggest-title mark {
  background: rgba(232, 93, 4, 0.16);
  color: var(--primary);
  padding: 0 1px;
  border-radius: 3px;
}
.bl-suggest-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.bl-suggest-empty {
  margin: 0;
  padding: 1rem 1.1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ── Category filter chips + sort ── */
.bl-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bl-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.bl-sort select {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--secondary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.bl-sort select:focus-visible { outline: 3px solid rgba(232, 93, 4, 0.35); outline-offset: 2px; }

.bl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}
.bl-filter {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--secondary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bl-filter:hover { border-color: var(--primary); color: var(--primary); }
.bl-filter.is-active {
  background: #1D3A72;
  border-color: #1D3A72;
  color: var(--white);
}
.bl-filter-n {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  opacity: 0.6;
}
.bl-result-note {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.bl-card-read { color: var(--text-muted); }

/* ── Empty state ── */
.bl-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: #FAFBFC;
}
.bl-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--secondary); margin: 0 0 0.5rem; }
.bl-empty p  { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 1.25rem; }

/* ── Shell ── */
.bl-list-section { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
.bl-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.bl-strip-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1.5rem;
}

/* ── Article cards ── */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1.5rem;
}
.bl-card { display: flex; flex-direction: column; }
.bl-card-imglink {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.bl-card-imglink img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.bl-card[data-slug="bess-fire-safety-india"] .bl-card-imglink {
  background: #eaf2fa;
}
.bl-card[data-slug="bess-fire-safety-india"] .bl-card-imglink img {
  object-fit: contain;
}
.bl-card:hover .bl-card-imglink img { transform: scale(1.05); }
.bl-chip {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.7rem;
  background: var(--white);
}
.bl-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.55rem;
}
.bl-card-title a { color: var(--secondary); transition: color 0.2s ease; }
.bl-card-title a:hover { color: var(--primary); }
.bl-card-excerpt {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.bl-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bl-card-author { font-weight: 600; color: var(--secondary); }

/* ── Sidebar ── */
.bl-side { position: sticky; top: 110px; }
.bl-side-block { margin-bottom: 2.25rem; }
.bl-side-block:last-child { margin-bottom: 0; }
.bl-side-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1.1rem;
}
.bl-side-list { display: grid; gap: 1.15rem; }
.bl-side-item {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 0.85rem;
  align-items: start;
}
.bl-side-item img {
  width: 88px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.25s ease;
}
.bl-side-item:hover img { transform: scale(1.04); }
.bl-side-body time {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.bl-side-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--secondary);
  transition: color 0.2s ease;
}
.bl-side-item:hover .bl-side-title { color: var(--primary); }

/* ============================================================
   PROJECT PAGE (pj-)
   ============================================================ */

/* ── Project execution overview ── */
.pj-exec { background: var(--white); padding: clamp(4rem, 7vw, 6rem) 0; }
.pj-exec-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pj-exec-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: #1D3A72;
  margin-bottom: 0.7rem;
}
.pj-exec-head p { font-size: 0.98rem; color: var(--text-muted); }
.pj-exec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.pj-exec-card {
  background: #F8F7F7;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  padding: 2.4rem 1.5rem 2.1rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.pj-exec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(29, 58, 114, 0.28);
  background: #1D3A72;
  border-color: #1D3A72;
}
.pj-exec-num, .pj-exec-label, .pj-exec-card p { transition: color 0.25s ease; }
.pj-exec-card:hover .pj-exec-num,
.pj-exec-card:hover .pj-exec-label,
.pj-exec-card:hover p { color: var(--white); }
.pj-exec-num {
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 0.55rem;
}
.pj-exec-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1D3A72;
  margin-bottom: 0.45rem;
}
.pj-exec-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ============================================================
   CONTACT PAGE (ct-)
   ============================================================ */

/* ── Quick action cards ── */
.ct-actions { background: var(--white); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.ct-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.ct-action {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #F4F5F7;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ct-action:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 96, 18, 0.45);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.ct-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 96, 18, 0.12);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-action--wa .ct-action-icon {
  background: rgba(37, 211, 102, 0.14);
  color: #1DA851;
}
.ct-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-action-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ct-action-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  overflow-wrap: anywhere;
}
.ct-action-note { font-size: 0.8rem; color: var(--text-muted); }
.ct-action-arrow {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ct-action:hover .ct-action-arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
   CONTACT PAGE — reference layout (cx-)
   Left: heading + contact details. Right: bordered form card.
   Then a "trusted by" logo row. Firetech styling/tokens.
   ============================================================ */
.cx-contact {
  background: var(--white);
  /* clear the 114px fixed header + generous breathing room */
  padding: 12.5rem 0 clamp(3rem, 5vw, 4.5rem);
}
.cx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;                /* balance the text mass against the form card */
}

/* left: heading + details */
.cx-info .section-tag { margin-bottom: 1.1rem; }
.cx-info h1 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0 0 1.1rem;
}
.cx-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 40ch;
  margin: 0 0 2.5rem;
}
.cx-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.cx-details li { display: flex; align-items: flex-start; gap: 1rem; }
.cx-detail-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 96, 18, 0.12);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cx-detail-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.cx-detail-label { font-size: 0.9rem; color: var(--text-muted); }
.cx-detail-value {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--secondary);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
a.cx-detail-value:hover { color: var(--primary); }

/* right: quiet, compact form card (calm companion to the text, not a heavy slab) */
.cx-form-card {
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.cx-form { display: grid; gap: 0.9rem; }
.cx-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.cx-form .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.cx-form label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
}
.cx-form .req { color: var(--primary); }
/* clean, compact white inputs (quiet like the reference) */
.cx-form input,
.cx-form textarea {
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  background: var(--white);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--secondary);
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cx-form textarea { resize: vertical; min-height: 110px; }
.cx-form input::placeholder,
.cx-form textarea::placeholder { color: #98a0ac; }
.cx-form input:focus,
.cx-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 96, 18, 0.12);
}
/* small button — the accent is a point, not a full-width bar */
.cx-submit {
  justify-self: start;
  width: auto;
  padding: 0.7rem 1.9rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.35rem;
}
.cx-form .form-success {
  display: none;
  color: #1DA851;
  font-weight: 600;
  font-size: 0.95rem;
}
.cx-form .form-success.show { display: block; }

/* trusted by row — no top divider; logos span the full width */
.cx-trusted {
  background: var(--white);
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.cx-trusted-title {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 2rem;
}
.cx-trusted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem clamp(2rem, 4vw, 3.5rem);
}
.cx-trusted-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  letter-spacing: 0.02em;
  color: #AEB4BE;
  transition: color 0.25s ease;
}
.cx-trusted-logo:hover { color: var(--secondary); }

/* ── Map ── */
.ct-map { background: #F4F5F7; padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.ct-map-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.ct-map-frame iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}

/* ── FAQ ── */
.ct-faq { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.ct-accordion { max-width: 820px; margin: 0 auto; }
.ct-accordion .accordion-header {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--secondary);
  gap: 1rem;
}
.ct-accordion .accordion-icon {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ct-accordion .accordion-header.open .accordion-icon { transform: rotate(45deg); }

/* ============================================================
   CONTACT PAGE — enterprise enquiry experience (ct2-)
   ============================================================ */
.ct2-eyebrow {
  display: inline-block;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ── Hero and direct contact rail ── */
.ct2-hero {
  background: #1D3A72;
  padding: 10rem 0 3.5rem;
  text-align: center;
}
.ct2-hero .breadcrumb {
  justify-content: center;
  margin-bottom: 1.75rem;
  color: rgba(255, 255, 255, 0.72);
}
.ct2-hero .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.ct2-hero .breadcrumb a:hover { color: var(--white); }
.ct2-hero-grid {
  display: block;
  padding: 0;
}
.ct2-hero-copy {
  max-width: 760px;
  margin: 0 auto;
}
.ct2-hero-copy .ct2-eyebrow { margin-bottom: 1rem; }
.ct2-hero-copy h1 {
  max-width: none;
  margin: 0 0 1.1rem;
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.ct2-hero-copy p {
  max-width: 64ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.7;
}
.ct2-response[hidden],
.ct2-channels[hidden],
.ct2-details li[hidden],
.ct2-trust[hidden] { display: none; }
.ct2-response {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--secondary);
  color: var(--white);
}
.ct2-response-dot {
  width: 9px;
  height: 9px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(232, 93, 4, 0.18);
}
.ct2-response-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ct2-response strong {
  display: block;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.4;
}
.ct2-response p {
  margin: 0.45rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.55;
}
.ct2-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ct2-channel {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 92px;
  padding: 1rem 1.25rem;
  color: var(--secondary);
  transition: background-color 0.2s ease;
}
.ct2-channel + .ct2-channel { border-left: 1px solid var(--border); }
.ct2-channel:hover { background: #f6f7f9; }
.ct2-channel:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(232, 93, 4, 0.3);
  outline-offset: -3px;
}
.ct2-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(232, 93, 4, 0.1);
  color: var(--primary);
}
.ct2-channel-icon svg { width: 18px; height: 18px; }
.ct2-channel small {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ct2-channel strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}
.ct2-channel-arrow {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ct2-channel:hover .ct2-channel-arrow {
  color: var(--primary);
  transform: translate(2px, -2px);
}
.ct2-channel.copy-email {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: copy;
}

/* ── Contact details and enquiry form ── */
.ct2-enquiry {
  background: #F4F5F7;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}
.ct2-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(560px, 1.16fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.ct2-info-panel {
  min-width: 0;
  padding-top: 0;
}
.ct2-panel-heading h2,
.ct2-location-heading h2 {
  margin: 0;
  color: var(--secondary);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
}
.ct2-panel-heading p {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.72;
}
.ct2-details {
  display: grid;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid #d9dde3;
  list-style: none;
}
.ct2-details li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.2rem 0;
  border-bottom: 1px solid #d9dde3;
}
.ct2-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(232, 93, 4, 0.1);
  color: var(--primary);
}
.ct2-detail-icon svg { width: 23px; height: 23px; }
.ct2-details small {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.ct2-details strong,
.ct2-details a,
.ct2-details .copy-email {
  display: block;
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}
.ct2-details a,
.ct2-details .copy-email {
  width: fit-content;
  transition: color 0.2s ease;
}
.ct2-details .copy-email {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: copy;
}
.ct2-details a:hover,
.ct2-details .copy-email:hover { color: var(--primary); }
/* Office address doubles as the Maps link — it's a two-line block, so it opts
   out of the fit-content shrink-wrap the single-line links use. No underline:
   the phone and email beside it are links too, and all three share the same
   orange-on-hover affordance. */
.ct2-details .ct2-address-link {
  width: auto;
  text-decoration: none;
}
.ct2-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.2rem;
  border-top: 1px solid #d9dde3;
  border-left: 1px solid #d9dde3;
}
.ct2-trust div {
  min-height: 110px;
  padding: 1.15rem;
  border-right: 1px solid #d9dde3;
  border-bottom: 1px solid #d9dde3;
}
.ct2-trust strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--secondary);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ct2-trust span {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.ct2-form-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid #e0e3e8;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}
.ct2-form-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 1rem;
  margin-bottom: 0.9rem;
}
.ct2-required-note {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.ct2-required-note span { color: var(--primary); }
.ct2-form {
  display: grid;
  gap: 0.72rem;
}
.ct2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.ct2-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ct2-field label {
  margin-bottom: 0.35rem;
  color: var(--secondary);
  font-size: 0.79rem;
  font-weight: 650;
}
.ct2-field label span { color: var(--primary); }
.ct2-field input,
.ct2-field select,
.ct2-field textarea {
  width: 100%;
  border: 1.5px solid #b8c0cc;
  border-radius: 10px;
  background: var(--white);
  color: var(--secondary);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ct2-field input,
.ct2-field select {
  height: 52px;
  padding: 0 0.95rem;
}
.ct2-field textarea {
  min-height: 132px;
  padding: 0.85rem 0.95rem;
  line-height: 1.55;
  resize: vertical;
}
.ct2-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23636b7b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.ct2-field input::placeholder,
.ct2-field textarea::placeholder { color: #8d95a1; }
.ct2-field input:hover,
.ct2-field select:hover,
.ct2-field textarea:hover { border-color: #8f99a8; }
.ct2-field input:focus,
.ct2-field select:focus,
.ct2-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.12);
}
.ct2-field.is-invalid input,
.ct2-field.is-invalid select,
.ct2-field.is-invalid textarea {
  border-color: #c9362b;
  box-shadow: 0 0 0 3px rgba(201, 54, 43, 0.09);
}
.ct2-field-error {
  min-height: 0;
  margin-top: 0.22rem;
  color: #b42318;
  font-size: 0.72rem;
  line-height: 1.35;
}
.ct2-field-error:empty { display: none; }
.ct2-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}
.ct2-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: 220px;
  min-height: 52px;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ct2-submit:hover:not(:disabled) {
  border-color: #cf4f03;
  background: #cf4f03;
  transform: translateY(-1px);
}
.ct2-submit:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.28);
  outline-offset: 3px;
}
.ct2-submit:disabled {
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
}
.ct2-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: ct2-spin 0.8s linear infinite;
}
.ct2-submit.is-loading .ct2-submit-spinner { display: inline-block; }
.ct2-submit.is-loading > span:last-child { display: none; }
.ct2-reassurance {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.ct2-reassurance svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.ct2-form-status {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
}
.ct2-form-status.is-success {
  border: 1px solid #a7d7b9;
  background: #edf8f1;
  color: #17653a;
}
.ct2-form-status.is-error {
  border: 1px solid #e7b5b0;
  background: #fff2f0;
  color: #9f241b;
}

/* ── Selected clients ── */
.ct2-clients {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #F4F5F7;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.ct2-clients-label {
  margin: 0 0 2rem;
  color: var(--secondary);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-align: center;
}
.ct2-client-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ct2-client-marquee::before,
.ct2-client-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(10vw, 150px);
  pointer-events: none;
}
.ct2-client-marquee::before {
  left: 0;
  background: linear-gradient(to right, #F4F5F7, rgba(244, 245, 247, 0));
}
.ct2-client-marquee::after {
  right: 0;
  background: linear-gradient(to left, #F4F5F7, rgba(244, 245, 247, 0));
}
.ct2-client-track {
  --ct2-logo-gap: 48px;
  --ct2-logo-offset: 24px;
  display: flex;
  align-items: center;
  gap: var(--ct2-logo-gap);
  width: max-content;
  margin: 0;
  padding: 0.65rem 0;
  list-style: none;
}
.ct2-client-track.is-ready {
  animation: ct2-client-scroll 86s linear infinite;
  will-change: transform;
}
.ct2-client-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 190px;
  height: 96px;
  padding: 0.9rem;
  border-radius: 14px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.ct2-client-track img {
  display: block;
  width: auto;
  max-width: 170px;
  max-height: 76px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.25s ease;
}
.ct2-client-track li:hover {
  background: var(--white);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.ct2-client-track li:hover img {
  transform: scale(1.04);
}

/* ── Office location ── */
.ct2-location {
  scroll-margin-top: 120px;
  background: #F4F5F7;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}
.ct2-location-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}
.ct2-location-heading .ct2-eyebrow { margin-bottom: 0.75rem; }
.ct2-location-copy {
  justify-self: end;
  max-width: 460px;
}
.ct2-location-copy p {
  margin: 0 0 0.8rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.ct2-location-copy a {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
}
.ct2-location-copy a:hover { text-decoration: underline; }
.ct2-map-frame {
  overflow: hidden;
  border: 1px solid #d9dde3;
  border-radius: 16px;
  background: #eceff2;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}
.ct2-map-frame iframe {
  display: block;
  width: 100%;
  height: 430px;
  border: 0;
}

@keyframes ct2-spin { to { transform: rotate(360deg); } }
@keyframes ct2-client-scroll {
  to { transform: translateX(calc(-50% - var(--ct2-logo-offset))); }
}
@media (prefers-reduced-motion: reduce) {
  .ct2-channel,
  .ct2-channel-arrow,
  .ct2-submit,
  .ct2-client-track,
  .ct2-client-track img { transition: none; }
  .ct2-submit-spinner { animation: none; }
  .ct2-client-track.is-ready {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
    will-change: auto;
  }
  .ct2-client-track [aria-hidden="true"] { display: none; }
}

/* ── Featured project showcase — boxed auto slider ── */
.pj-showcase { background: var(--white); padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.pj-case-card {
  position: relative;
  display: grid;
  border-radius: 20px;
  overflow: hidden;
  background: #1D3A72;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
.pj-case {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: min(78vh, 640px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.pj-case.is-active { opacity: 1; visibility: visible; }
.pj-case-text {
  padding: clamp(2.25rem, 4.5vw, 3.75rem);
  padding-bottom: clamp(4rem, 6vw, 5.5rem);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.pj-case-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF8A52;
  margin-bottom: 0.9rem;
}
.pj-case-text h3 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.1rem;
  line-height: 1.15;
}
.pj-case-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.75rem;
  max-width: 56ch;
}
.pj-case-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pj-case-pills span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  white-space: nowrap;
}
.pj-case-media { position: relative; min-height: 480px; }
.pj-case-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pj-case-dots {
  position: absolute;
  left: clamp(2.25rem, 4.5vw, 3.75rem);
  bottom: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  gap: 0;
  z-index: 3;
}
.pj-case-dot {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.pj-case-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, width 0.25s ease;
}
.pj-case-dot.is-active::before { width: 26px; background: var(--primary); }
.pj-case-dot:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: -5px; }

/* ── Project process — connected path with icon nodes ── */
.pj-process { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.pf-wrap { position: relative; margin-top: 1rem; }
/* Rows: 4-column rhythm; bottom row runs right-to-left back to col 1 */
.pf-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2rem;
  height: 265px;
}
/* The horizontal path each row of nodes sits on */
.pf-row::before {
  content: "";
  position: absolute;
  top: 37px;
  height: 2px;
  background: #1D3A72;
  left: 12.5%;
  right: 118px;
}
.pf-row--bottom::before { left: 12.5%; right: 118px; }
/* Right-side U-turn connecting the two rows */
.pf-curve {
  position: absolute;
  top: 37px;
  right: 0;
  width: 120px;
  /* spans line 1 (y=37) to line 2 (y=265+37) */
  height: 267px;
  border: 2px solid #1D3A72;
  border-left: 0;
  border-radius: 0 175px 175px 0;
  pointer-events: none;
}
.pf-row--bottom { height: auto; min-height: 230px; }
/* pin all bottom nodes to the same grid row — explicit columns alone
   make auto-placement cascade them onto new rows */
.pf-row--bottom .pf-item { grid-row: 1; }
.pf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pf-node {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid #1D3A72;
  color: #1D3A72;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 8px var(--white);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.pf-item:hover .pf-node {
  transform: translateY(-4px);
  background: #1D3A72;
  color: var(--white);
}
.pf-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}
.pf-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  max-width: 24ch;
}
.pf-item p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 30ch;
}

/* ── Quality assurance cards ── */
.pj-qa { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.pj-qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pj-qa-card {
  background: #F4F5F7;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pj-qa-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 96, 18, 0.4);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.pj-qa-icon {
  display: inline-flex;
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.pj-qa-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.pj-qa-card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── Service + project decision CTAs ──
   Dark engineering panel based on Firetech's fire-pump-room blueprint. */
.decision-cta-section {
  --cta-blue: #214779;
  --cta-blue-deep: #183961;
  --cta-border: rgba(91, 126, 169, 0.62);
  --cta-ink: #f8faff;
  --cta-muted: #d4deeb;
  --cta-orange: #ff843d;
  padding: clamp(3rem, 4.5vw, 4.25rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 54%, #eef3f9 100%);
}
.decision-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 336px);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  min-height: 320px;
  padding: 42px clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--cta-border);
  border-radius: 12px;
  background: var(--cta-blue);
  box-shadow:
    0 24px 52px rgba(29, 58, 114, 0.18),
    0 4px 12px rgba(29, 58, 114, 0.09);
}
.decision-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(24, 57, 97, 0.99) 0%,
    rgba(24, 57, 97, 0.96) 43%,
    rgba(24, 57, 97, 0.72) 62%,
    rgba(24, 57, 97, 0.14) 100%
  );
  pointer-events: none;
}
.decision-cta-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.decision-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.85rem;
  color: var(--cta-orange);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.decision-cta-kicker::before {
  content: "";
  width: 25px;
  height: 2px;
  background: var(--cta-orange);
}
.decision-cta-copy h2,
.pj-cta-text h2 {
  max-width: 32ch;
  margin: 0 0 0.75rem;
  color: var(--cta-ink);
  font-size: clamp(2rem, 3.05vw, 2.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
}
.decision-cta-copy p,
.pj-cta-text p {
  max-width: 65ch;
  margin: 0;
  color: var(--cta-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.decision-cta-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 730px;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.decision-cta-trust li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: rgba(248, 250, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}
.decision-cta-trust li::before {
  content: none;
}
.decision-cta-trust-icon {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  color: var(--cta-orange);
}
.decision-cta-trust-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.decision-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  width: 100%;
}
.decision-cta-actions .btn,
.decision-cta-actions .pj-cta-call {
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  border-radius: 9px;
  padding: 0.95rem 1.7rem;
  font-size: 0.94rem;
  font-weight: 700;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease;
}
.decision-cta-actions .btn-primary {
  border: 1px solid #dc6726;
  background: linear-gradient(100deg, #c34a00 0%, #c94d00 100%);
  box-shadow: 0 10px 24px rgba(138, 48, 0, 0.26);
}
.decision-cta-actions .btn-primary span {
  display: inline-flex;
  margin-left: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.24s ease;
}
.decision-cta-actions .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(100deg, #b84400 0%, #c14900 100%);
  box-shadow: 0 14px 28px rgba(122, 42, 0, 0.32);
}
.decision-cta-actions .btn-primary:hover span {
  transform: translateX(4px);
}
.decision-cta-actions .btn-outline {
  border-color: rgba(232, 239, 248, 0.7);
  background: rgba(9, 34, 67, 0.25);
  color: var(--cta-ink);
}
.decision-cta-actions .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  color: var(--cta-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2, 10, 24, 0.24);
}
.decision-cta-actions .btn:focus-visible,
.decision-cta-actions .pj-cta-call:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.46);
  outline-offset: 3px;
}
.decision-cta-blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.52;
  background: url("../assets/images/cta-fire-pump-blueprint.webp") center / cover no-repeat;
  filter: saturate(0.76) brightness(1.18);
  pointer-events: none;
}
.pj-cta-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 54%, #eef3f9 100%);
}
.pj-cta-text {
  position: relative;
  z-index: 2;
}
.pj-cta-call {
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 0.7rem;
  border: 1px solid rgba(232, 239, 248, 0.7);
  background: rgba(9, 34, 67, 0.25);
  color: var(--cta-ink);
  font-weight: 700;
}
.pj-cta-call:hover {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  color: var(--cta-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(2, 10, 24, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .decision-cta-actions .btn,
  .decision-cta-actions .pj-cta-call,
  .decision-cta-actions .btn-primary span {
    transition: none;
  }
  .decision-cta-actions .btn:hover,
  .decision-cta-actions .pj-cta-call:hover {
    transform: none;
  }
}


/* ============================================================
   UNIVERSAL TYPE SCALE — one size per heading level, sitewide
   H1 (page heroes) · H2 (section headings) · H3 (card titles)
   ============================================================ */
.sv-hero h1,
.ab-hero-top h1,
.bl-hero h1,
.page-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
}

.section-header h2,
.trust-text-inner h2,
.results-head-text h2,
.work-head h2,
.contact-info h2,
.cta-section h2,
.ab-mission-body h2,
.ab-solve-head h2,
.ab-team-intro h2,
.ab-logos h2,
.ab-scale-head h2,
.sv-text h2,
.cl-trust-grid h2,
.cl-story-text h2,
.pj-exec-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
}

.service-card h3,
.project-body h3,
.blog-card-body h3,
.value-card h3,
.trust-card-body h3,
.feature-title,
.process-node-title,
.work-card-text h3,
.ab-card h3,
.pf-item h3,
.pj-qa-card h3,
.bl-card-title {
  font-size: 1.1rem;
  font-weight: 600;
}
/* editorial feature tile keeps its larger scale, weight aligned */
.work-card--feature .work-card-text h3 { font-size: 1.75rem; font-weight: 600; }
/* homepage Solutions cards run 20% larger than the shared card scale —
   they're the section's primary read, so they opt out of the group above */
.solution-body h3 { font-size: 1.32rem; font-weight: 700; }

/* ── Service media sliders (3 photos per service, auto-advancing) ── */
.sv-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12);
}
.sv-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sv-slider img.is-active { opacity: 1; }
.sv-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  z-index: 2;
}
.sv-slider-dot {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.sv-slider-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, width 0.25s ease;
}
.sv-slider-dot.is-active::before { width: 22px; background: var(--primary); }
.sv-slider-dot:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: -5px; }

/* ============================================================
   PRE-FOOTER CTA + SITEWIDE FOOTER (ftr-)
   Reference: dark ember band with product image left, caps
   heading right; light grey footer with 4 columns + legal bar.
   ============================================================ */

/* ── Footer ── */
.ftr {
  position: relative;
  background: #1D3A72;
  padding-top: clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
}
.ftr-hex {
  position: absolute;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.055);
}
.ftr-hex--l { width: 190px; bottom: -55px; left: -55px; }
.ftr-hex--r { width: 150px; top: 30px; right: -45px; color: rgba(255, 255, 255, 0.045); }

.ftr-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) 0.75fr 1.05fr minmax(280px, 1.45fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* columns must be allowed to shrink — otherwise long unbreakable
   content (emails) pushes the grid past the navbar gutter */
.ftr-grid > * { min-width: 0; }
.ftr-contactcol a, .ftr-contactcol span { overflow-wrap: anywhere; }
.ftr-logo {
  display: inline-flex;
  align-items: center;
}
.ftr-logo img {
  width: auto;
  height: 66px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.98;
}
.ftr-brand p {
  margin: 1.5rem 0 1.65rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.76);
  max-width: 40ch;
}
.ftr-linkedin {
  width: fit-content;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ftr-linkedin::after {
  content: "↗";
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.ftr-linkedin:hover {
  background: var(--white);
  border-color: var(--white);
  color: #1D3A72;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(7, 22, 50, 0.22);
}
.ftr-linkedin:hover::after {
  transform: translate(2px, -2px);
}
.ftr-linkedin:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.42);
  outline-offset: 3px;
}

.ftr-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primary);
  margin-bottom: 1.35rem;
}
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ftr-col ul a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}
.ftr-col ul a:hover { color: var(--primary); }

.ftr-contactcol ul { gap: 1rem; }
.ftr-contactcol li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}
.ftr-ic { color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.ftr-contactcol address {
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-style: normal;
}
.ftr-contactcol address strong {
  color: var(--white);
  font-weight: 700;
}
.ftr-contactcol .ftr-location-link strong {
  transition: color 0.2s ease;
}
.ftr-contactcol .ftr-location-link:hover strong {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.ftr-contactcol .ftr-location-link:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.ftr-contactcol .copy-email {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: copy;
  transition: color 0.2s ease;
}
.ftr-contactcol .copy-email:hover { color: var(--primary); }
.ftr-phone-list {
  display: grid;
  gap: 0.25rem;
}

.copy-email-toast {
  position: fixed;
  right: 1rem;
  bottom: 5.75rem;
  z-index: 1200;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  background: #111827;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.copy-email-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.copy-email-inline {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(232, 93, 4, 0.5);
  text-underline-offset: 0.15em;
  cursor: copy;
}

/* ── Legal bottom bar ── */
.ftr-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 1.2rem 0;
}
.ftr-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
}
.ftr-legal { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.ftr-legal a,
.ftr-legal .ftr-cookie { color: rgba(255, 255, 255, 0.68); transition: color 0.2s ease; }
.ftr-legal a:hover,
.ftr-legal .ftr-cookie:hover { color: var(--primary); }
/* Cookie Settings is a control, not a destination, so it's a <button>.
   Reset the element so it renders identically to its sibling links. */
.ftr-legal .ftr-cookie {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.ftr-legal .ftr-cookie:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ============================================================
   ABOUT — WHO WE ARE (abw-): callback bar, tabbed intro, stats
   ============================================================ */
.abw { background: var(--white); padding: clamp(1.25rem, 2vw, 1.75rem) 0 clamp(3.5rem, 6vw, 5rem); }

/* ── Quick callback bar ── */
.abw-cta {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 2.5vw, 2.5rem);
  right: clamp(1rem, 2.5vw, 2.5rem);
  bottom: clamp(1rem, 2.5vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 2vw, 2rem);
  flex-wrap: wrap;
  overflow: hidden;
  background: rgba(10, 15, 25, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1.25rem, 2.2vw, 1.8rem);
  margin: 0;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.abw-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 32%, transparent 58%);
  pointer-events: none;
}
.abw-cta > * {
  position: relative;
  z-index: 1;
}
.abw-cta-title {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
  flex-shrink: 0;
}
.abw-cta-fields {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.abw-cta-fields input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--white);
  caret-color: var(--white);
  outline: none;
  flex: 1;
  min-width: 150px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.abw-cta-fields input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 0 2px rgba(232, 93, 4, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.abw-cta-fields input::placeholder { color: rgba(255, 255, 255, 0.74); }
.abw-cta-btn {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, #f36a13, var(--primary));
  color: var(--white);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.85rem 1.85rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    0 6px 16px rgba(232, 93, 4, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.abw-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(232, 93, 4, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.abw-cta-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}
.abw-cta-status { margin: 0.75rem 0 0; font-size: 0.9rem; font-weight: 600; }
.abw-cta-success { color: var(--white); }
.abw-cta-error { color: #ffe0d7; }
@media (prefers-reduced-motion: reduce) {
  .abw-cta-btn { transition: none; }
  .abw-cta-btn:hover { transform: none; }
}

/* ── Split: image + tabbed story ── */
.abw-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.abw-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.abw-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.8rem;
}
.abw-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.abw-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.abw-tab {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 0 0.85rem;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.abw-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.abw-tab:hover { color: var(--secondary); }
.abw-tab.is-active { color: var(--primary); }
.abw-tab.is-active::after { transform: scaleX(1); }
.abw-panel { display: none; }
.abw-panel.is-active { display: block; animation: abw-fade 0.35s ease; }
@keyframes abw-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.abw-panel p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
  max-width: 58ch;
}
.abw-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.5rem;
}
.abw-checks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--secondary);
}
.abw-check { color: var(--primary); flex-shrink: 0; display: inline-flex; }

/* ── Stats strip ── */
.abw-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.abw-stat-num {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.abw-stat-label { font-size: 0.85rem; color: var(--text-muted); }

/* ============================================================
   PRE-FOOTER CTA — enquiry panel (fcta-)
   Compact enquiry panel aligned to the site's global gutters.
   The photo crops to the form height; the two enquiry channels
   share one action row.
   ============================================================ */
.fcta {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid var(--border);
  background: #F4F5F7;
}
.fcta > .container {
  position: relative;
  z-index: 1;
}
.fcta-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  align-items: stretch;
}

/* ── On-site project photo, cropped to the compact form height ── */
.fcta-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 360px;
  background: #1D3A72;
}
.fcta-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Form side — light, fills its half ── */
.fcta-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.25rem, 1vw, 0.75rem) clamp(0.25rem, 1vw, 0.75rem) clamp(0.25rem, 1vw, 0.75rem) 0;
}
.fcta-side h2 {
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.fcta-sub {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1.35rem;
  max-width: none;
  white-space: nowrap;
}
.fcta-form { display: grid; gap: 0.85rem; }
.fcta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.fcta-form input,
.fcta-form select,
.fcta-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  padding: 0.72rem 0.95rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--secondary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fcta-form input:focus,
.fcta-form select:focus,
.fcta-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 96, 18, 0.18);
}
.fcta-form ::placeholder { color: var(--text-muted); }
.fcta-form select:invalid { color: var(--text-muted); }
.fcta-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23636b7b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  padding-right: 2.6rem;
}
.fcta-form textarea { resize: vertical; min-height: 64px; }
/* stacked actions: orange primary → "or" divider → outline WhatsApp */
.fcta-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.15rem;
}
/* slim "or" divider with hairline rules */
.fcta-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.fcta-or::before,
.fcta-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.fcta-submit {
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0.95rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.fcta-submit:hover {
  background: #e5560f;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 96, 18, 0.3);
}
.fcta-submit:active { transform: translateY(0); }
.fcta-success { font-size: 0.9rem; font-weight: 600; margin: 0.75rem 0 0; }
.fcta-success.is-success { color: #1DA851; }
.fcta-success.is-error { color: #b42318; }
/* outline WhatsApp — quiet secondary, fills green on hover */
.fcta-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  border: 1.5px solid #1DA851;
  border-radius: 12px;
  background: transparent;
  color: #128C4A;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.fcta-wa:hover {
  background: #1DA851;
  border-color: #1DA851;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.24);
}
.fcta-wa:active { transform: translateY(0); }
.fcta-wa:focus-visible {
  outline: 3px solid rgba(18, 140, 74, 0.3);
  outline-offset: 3px;
}
/* ============================================================
   CUSTOMER REVIEWS (rv-) — featured photo quote + 2×2 cards
   ============================================================ */
.rv-section { background: var(--white); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }

.rv-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* ── Featured photo card ── */
.rv-feature {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  min-height: 460px;
}
.rv-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 18, 36, 0.85) 0%, rgba(10, 18, 36, 0.25) 45%, rgba(10, 18, 36, 0) 70%);
}
.rv-feature-mark {
  position: absolute;
  right: 1.25rem;
  bottom: 3.2rem;
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
  z-index: 1;
  pointer-events: none;
}
.rv-feature-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem;
  color: var(--white);
}
.rv-feature-cap p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 30ch;
}
.rv-feature-cap .rv-id b { color: var(--white); }
.rv-feature-cap .rv-id small { color: rgba(255, 255, 255, 0.7); }

/* ── Review cards ── */
.rv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.rv-card {
  background: #F4F5F7;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.rv-stars { display: flex; gap: 3px; color: var(--primary); margin-bottom: 0.9rem; }
.rv-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--secondary);
  margin-bottom: 1.25rem;
}
.rv-who { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.rv-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rv-id { display: flex; flex-direction: column; line-height: 1.3; }
.rv-id b { font-size: 0.9rem; font-weight: 600; color: var(--secondary); }
.rv-id small { font-size: 0.78rem; color: var(--text-muted); }

/* ── Feature card #1 — full-photo tagline card ── */
.feature-card--photo {
  padding: 0;
  overflow: hidden;
  background: var(--secondary);
  border: 0;
}
.feature-card--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.feature-card--photo:hover img { transform: scale(1.04); }
/* dark overlay so the tagline stays readable */
.feature-card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 36, 0.85) 0%, rgba(10, 18, 36, 0.3) 45%, rgba(10, 18, 36, 0.15) 75%, rgba(10, 18, 36, 0.45) 100%);
}
.feature-photo-tag {
  position: absolute;
  left: 2.25rem;
  right: 2.25rem;
  top: 2.5rem;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
}

/* rounded-square arrow chip on the photo card — rotates 45° on hover */
.feature-photo-arrow {
  position: absolute;
  right: 0.95rem;
  bottom: 0.85rem;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.3s ease;
}
.feature-photo-arrow svg { transition: transform 0.3s ease; }
.feature-card--photo:hover .feature-photo-arrow {
  background: var(--primary);
}
.feature-card--photo:hover .feature-photo-arrow svg {
  transform: rotate(-45deg);
}

/* Full-card contact trigger — keeps the photo composition untouched. */
.feature-photo-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.feature-photo-open:focus { outline: none; }
.feature-photo-open:focus-visible {
  box-shadow:
    inset 0 0 0 3px #ffffff,
    inset 0 0 0 6px var(--primary);
}

/* ── Quick-contact modal ──
   Compact engineering enquiry surface opened from the photo card. */
.quick-contact-overlay {
  --qc-blue: #1d3a72;
  --qc-orange: #e85d04;
  --qc-ink: #182033;
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow-y: auto;
  background: rgba(8, 20, 42, 0.66);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
.quick-contact-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.quick-contact-dialog {
  width: min(100%, 520px);
  max-height: min(92vh, 720px);
  overflow-y: auto;
  border: 1px solid rgba(132, 151, 181, 0.38);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(4, 15, 36, 0.42);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.quick-contact-overlay.is-open .quick-contact-dialog {
  transform: translateY(0) scale(1);
}
.quick-contact-header {
  position: relative;
  padding: 1.5rem 4.25rem 0.7rem 2rem;
  background: #ffffff;
}
.quick-contact-header h2 {
  margin: 0;
  color: var(--qc-blue);
  font-size: clamp(1.55rem, 4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.quick-contact-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d7dee8;
  border-radius: 50%;
  background: #f7f9fc;
  color: var(--qc-blue);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.quick-contact-close svg { width: 19px; height: 19px; }
.quick-contact-close:hover {
  border-color: #b8c4d4;
  background: #eef2f7;
  transform: rotate(4deg);
}
.quick-contact-close:focus-visible {
  outline: 3px solid rgba(29, 58, 114, 0.24);
  outline-offset: 3px;
}
.quick-contact-form {
  padding: 1rem 2rem 1.9rem;
}
.quick-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.quick-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  min-width: 0;
}
.quick-contact-field--wide { grid-column: 1 / -1; }
.quick-contact-field label {
  color: var(--qc-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.quick-contact-field label span { color: var(--qc-orange); }
.quick-contact-field input,
.quick-contact-field select {
  width: 100%;
  height: 48px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  background-color: #f8fafc;
  color: var(--qc-ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.quick-contact-field input::placeholder { color: #929cab; }
.quick-contact-field input:hover,
.quick-contact-field select:hover { border-color: #aeb9c9; }
.quick-contact-field input:focus,
.quick-contact-field select:focus {
  border-color: var(--qc-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(29, 58, 114, 0.12);
}
.quick-contact-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  margin-top: 1.2rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid #c94d00;
  border-radius: 8px;
  background: #c94d00;
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(158, 56, 0, 0.2);
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.quick-contact-submit:hover {
  background: #b84500;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(158, 56, 0, 0.27);
}
.quick-contact-submit:focus-visible {
  outline: 3px solid rgba(232, 93, 4, 0.3);
  outline-offset: 3px;
}
.quick-contact-submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}
.quick-contact-status {
  margin: 1rem 0 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid #b9dbc6;
  border-radius: 8px;
  background: #eff9f2;
  color: #21613a;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.5;
}
.quick-contact-status.is-error {
  border-color: #e7b5b0;
  background: #fff2f0;
  color: #9f241b;
}

@media (prefers-reduced-motion: reduce) {
  .quick-contact-overlay,
  .quick-contact-dialog,
  .quick-contact-close,
  .quick-contact-submit { transition: none; }
}

/* ============================================================
   PROJECT PROCESS — vertical scroll timeline (pp-)
   Light theme. Grey center line, orange scroll-fill, big
   ghosted numbers that brighten as each step activates.
   ============================================================ */
.pp-section {
  --pp-hex-orange: #EA580C;
  --pp-hex-navy: #1E3A5F;
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  /* near-white base + one very soft orange glow behind the heading */
  background:
    radial-gradient(circle 600px at 50% 240px, rgba(234, 88, 12, 0.04), transparent 70%),
    #FAFAFB;
  overflow: hidden;                 /* crop hero/anchor hexes at the edges */
}
/* lift the real content above the decorative hexes */
.pp-section > .container { position: relative; z-index: 1; }
.pp-body { position: relative; z-index: 1; }

/* ---- deliberate hexagon compositions (inline SVGs) ---- */
/* shared behaviour */
.pp-deco,
.pp-deco-hero,
.pp-deco-anchor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* stroke/fill treatments — tunable via the two custom properties */
.pp-hx-so  { fill: none; stroke: var(--pp-hex-orange); }
.pp-hx-sn  { fill: none; stroke: var(--pp-hex-navy); }
.pp-hx-fo  { stroke: none; fill: var(--pp-hex-orange); }
.pp-hx-fn  { stroke: none; fill: var(--pp-hex-navy); }

/* hero — concentric outlined hexes, cropped off the top-right edge */
.pp-deco-hero {
  top: -140px;
  right: -180px;
  width: 460px;
  height: auto;
  animation: ppHeroFloat 20s ease-in-out infinite;
}
@keyframes ppHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-deco-hero,
  .pp-deco--ring { animation: none; }
}

/* pocket clusters — positioned inside their step's empty column */
.pp-deco--a { left: 2%;  top: 12%;  width: 330px; height: auto; }
.pp-deco--b { right: 1%; top: 10%;  width: 320px; height: auto; }
.pp-deco--c { right: 0;  top: 28px; width: 340px; height: auto; }
.pp-deco--d { left: 6px; top: 34px; width: 330px; height: auto; }
/* second ring — bleeds off the left viewport edge beside step 3 */
.pp-deco--ring {
  left: -370px;
  top: 0;
  width: 420px;
  height: auto;
  animation: ppHeroFloat 26s ease-in-out infinite;
}

/* anchor — connected honeycomb strip bleeding off the bottom-left corner */
.pp-deco-anchor {
  left: -90px;
  bottom: -70px;
  width: 430px;
  height: auto;
}

.pp-timeline {
  --pp-media-h: clamp(220px, 24vw, 300px);
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
}

/* one step row */
.pp-step {
  --pp-num-h: clamp(2.6rem, 4vw, 3.4rem);   /* number line-box height */
  --pp-num-top: 34px;                        /* number sits near the image's upper area */
  --pp-gap: 24px;                            /* clear space between number and line */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* wide gap so cards sit ~55–75px clear of the centre axis on both sides */
  column-gap: clamp(6rem, 11vw, 9.5rem);
  margin-bottom: 56px;                        /* fixed rhythm → deterministic line gaps */
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.pp-step:last-child { margin-bottom: 0; }
.pp-step.is-active { opacity: 1; }

/* SEGMENTED vertical line — one segment per step, on the centre axis.
   Starts ~24px BELOW this step's number and runs down toward the next number,
   leaving a clear gap at each end (01 | | | 02 | | | 03 …).
   ::before is the grey track; ::after is the orange fill that GROWS with
   scroll (scaleY driven by the per-step --seg custom property from JS). */
.pp-step::before,
.pp-step::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  border-radius: 3px;
  /* begin ~24px below this number, end ~24px above the next number.
     next number center-top = this step bottom + margin(56px) + next --pp-num-top(34px);
     leaving --pp-gap(24px) above it → segment bottom extends past this box. */
  top: calc(var(--pp-num-top) + var(--pp-num-h) + var(--pp-gap));
  bottom: calc(-1 * (56px + var(--pp-num-top) - var(--pp-gap)));
}
.pp-step::before {
  transform: translateX(-50%);
  background: var(--border);
}
.pp-step::after {
  background: var(--primary);
  transform: translateX(-50%) scaleY(var(--seg, 0));
  transform-origin: 50% 0;
  transition: transform 0.15s linear;
}
.pp-step:last-child::before,
.pp-step:last-child::after { display: none; }   /* no trailing line after the final number */

/* bare architectural numbers — no badge, no background, no line behind them.
   Aligned to the image's UPPER area, straddling the centre axis. */
.pp-num {
  position: absolute;
  left: 50%;
  top: var(--pp-num-top);
  transform: translateX(-50%);
  z-index: 2;
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--border);
  transition: color 0.4s ease;
}
/* in focus: Firetech navy; reverts to grey when scrolled out */
.pp-step.is-active .pp-num { color: #1D3A72; }

/* content block */
.pp-body {
  max-width: 440px;
  transform: translateY(16px);
  transition: transform 0.55s ease;
}
.pp-step.is-active .pp-body { transform: translateY(0); }

.pp-step--left .pp-body {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.pp-step--right .pp-body {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

.pp-media {
  height: var(--pp-media-h);
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  background: #eef1f5;
}
.pp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* keep image aligned to the correct edge of each side */
.pp-step--left .pp-media { margin-left: auto; }
.pp-step--right .pp-media { margin-right: auto; }

.pp-body h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  color: var(--secondary);
}
.pp-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ============================================================
   ACCESSIBILITY — skip link
   Visually hidden until keyboard-focused, so the visual design is
   unchanged for mouse users while keyboard users can bypass the nav.
   ============================================================ */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  left: 0;
  outline: 3px solid #1D3A72;
  outline-offset: 2px;
}

/* ============================================================
   COOKIE CONSENT — hide the floating "revisit" badge
   CookieYes injects a fixed bottom-left handle for reopening the
   preference centre. The footer "Cookie Settings" button already
   provides that route on every page, so the floating badge is
   suppressed to keep it from overlapping content.
   Consent itself is untouched — only this launcher is hidden.
   ============================================================ */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-btn-revisit,
[data-cky-tag="revisit"],
[data-cky-tag="revisit-consent"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   DESKTOP QUICK ACTIONS — WhatsApp + catalogue
   Hidden by default so no new mobile/tablet UI is introduced.
   ============================================================ */
.desktop-quick-actions { display: none; }

@media (min-width: 769px) {
  .desktop-quick-actions {
    position: fixed;
    top: 50%;
    right: 28px;
    bottom: auto;
    z-index: 990;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(18px, -50%);
    transition: opacity 0.28s ease, transform 0.32s ease, visibility 0.28s ease;
  }
  .desktop-quick-actions.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%);
  }
  .desktop-quick-action {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    color: #fff;
    opacity: 0.52;
    box-shadow: 0 12px 28px rgba(18, 40, 80, 0.2);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .desktop-quick-action:hover,
  .desktop-quick-action:focus-visible {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(18, 40, 80, 0.28);
  }
  .desktop-quick-action--whatsapp { background: #20b95a; }
  .desktop-quick-action--catalogue { background: var(--primary); }
  .desktop-quick-action-icon,
  .desktop-quick-action-icon svg {
    width: 25px;
    height: 25px;
    display: block;
  }
  .desktop-quick-action-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translate(10px, -50%);
    padding: 9px 13px;
    border-radius: 10px;
    background: #132850;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(12, 27, 54, 0.2);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s ease;
  }
  .desktop-quick-action-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #132850;
  }
  .desktop-quick-action:hover .desktop-quick-action-label,
  .desktop-quick-action:focus-visible .desktop-quick-action-label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}

/* ============================================================
   CATALOGUE PAGE — portrait native browser PDF viewer
   ============================================================ */
.cat-page { background: #f5f7fa; }
.cat-hero {
  border-bottom: 1px solid #e7ebf1;
}
.cat-hero h1 {
  font-size: clamp(1.35rem, 7vw, 3.4rem);
  white-space: nowrap;
}
.cat-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
  flex: 0 0 auto;
}
.cat-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
.cat-actions .btn svg { width: 19px; height: 19px; }
.cat-open-link {
  justify-content: center;
  background: #1D3A72;
  border-color: #1D3A72;
  color: #fff;
}
.cat-open-link:hover {
  background: #132850;
  border-color: #132850;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 58, 114, 0.28);
}
.cat-viewer-section { padding: 4rem 0 6rem; }
.cat-viewer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  width: min(100%, 920px);
  margin: 0 auto 1.5rem;
}
.cat-viewer-head span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cat-viewer-head h2 { margin: 0; color: var(--secondary); }
.cat-viewer-shell {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 12px;
  border-radius: 20px;
  background: #263142;
  box-shadow: 0 24px 65px rgba(18, 40, 80, 0.2);
}
.cat-viewer {
  display: block;
  width: 100%;
  height: clamp(980px, 82vw, 1180px);
  border: 0;
  border-radius: 12px;
  background: #525659;
}
.cat-viewer-fallback {
  margin: 0;
  padding: 0.8rem 0.5rem 0.1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  text-align: center;
}
.cat-viewer-fallback a { color: #fff; font-weight: 700; }
.cat-mobile-pages { display: none; }

@media (prefers-reduced-motion: reduce) {
  .desktop-quick-action,
  .desktop-quick-action-label { transition: none; }
}