/**
 * iFieldSmart AI — Header & Footer Only Design System
 * Clean, minimal stylesheet with header, footer, and essential base styles
 */

/* ==========================================================================
   1. Design Tokens & Global CSS Variables
   ========================================================================== */
:root {
  /* Brand Primary & Accent */
  --color-primary: #F67214;
  --color-primary-hover: #E05F07;
  --color-text-main: #111418;
  --color-text-muted: #5F6368;
  --color-border: #E6E2D8;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Base Styles & Global Resets
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-main);
  background-color: #FCFBF8;
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-main);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Main content area */
.gbk {
  flex: 1;
  background-color: #FFFFFF;
  padding: 120px 20px 60px;
  text-align: center;
}

.gbk h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  color: var(--color-text-main);
}

.gbk p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   HEADER NAVIGATION STYLES
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 74.6px;
  min-height: 74.6px;
  padding: 0 74.6px;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100%;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid #EFEDE9;
  box-shadow: 0 2px 10px rgba(17, 20, 24, 0.05);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(17, 20, 24, 0.09);
}

.logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-container img,
.site-logo {
  height: 40px;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.3s ease;
  position: relative;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.nav-menu li a:hover::after,
.nav-menu li a.active::after {
  width: 100%;
}

.nav-menu li a:hover,
.nav-menu li a.active {
  color: var(--color-primary);
}

/* ============================================================
   EVENTS DROPDOWN NAVIGATION
   ============================================================ */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer;
}

.dropdown-chevron {
  transition: transform 0.25s ease;
  margin-top: 1px;
}

.nav-item-dropdown:hover .dropdown-chevron,
.nav-item-dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-item-dropdown:hover .nav-link-dropdown {
  color: var(--color-primary);
}

.nav-item-dropdown:hover .nav-link-dropdown::after {
  width: 100%;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  transform: translateY(8px);
  background: #ffffff;
  min-width: 195px;
  width: max-content;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 1050;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.nav-dropdown-item .dropdown-item-arrow {
  color: #64748B;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.nav-dropdown-menu li a::after,
.nav-dropdown-item::after {
  display: none !important;
}

.nav-dropdown-item:hover {
  background-color: rgba(246, 114, 20, 0.08) !important;
  color: var(--color-primary) !important;
}

.nav-dropdown-item:hover .dropdown-item-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

.login-btn {
  background: #F67214;
  color: #FFFFFF !important;
  border: 1.5px solid #F67214;
  height: 47px;
  padding: 0 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.login-btn:hover {
  transform: translateY(-1px);
  border-color: #E05F03;
  background: #E05F03;
}

/* ============================================================
   HAMBURGER & MOBILE MENU
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.hamburger span {
  width: 24px;
  height: 2.5px;
  background: var(--color-text-main);
  border-radius: 3px;
  transition: all 0.3s ease;
  display: block;
  position: absolute;
}

.hamburger span:nth-child(1) {
  top: 12px;
}

.hamburger span:nth-child(2) {
  top: 19px;
}

.hamburger span:nth-child(3) {
  top: 26px;
}

.hamburger.active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: 74.6px;
  left: 0;
  width: 100%;
  height: calc(100vh - 74.6px);
  background: rgba(252, 251, 248, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 32px 20px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-menu ul li a {
  display: block;
  padding: 12px 0;
  color: var(--color-text-main);
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.mobile-menu ul li a:hover {
  color: var(--color-primary);
}

.mobile-nav-dropdown {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
}

.mobile-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}

.mobile-dropdown-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-main);
}

/* Chevron in a small round button that turns when the list opens */
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #667085;
  cursor: pointer;
  transition: color 0.25s ease;
}

.mobile-dropdown-chevron {
  transition: transform 0.25s ease;
}

.mobile-nav-dropdown.is-open .mobile-dropdown-toggle {
  color: var(--color-text-main);
}

.mobile-nav-dropdown.is-open .mobile-dropdown-chevron {
  transform: rotate(180deg);
}

/* Event list: a soft panel that slides open */
.mobile-submenu {
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-left: 1px solid #E3E8EC;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

.mobile-nav-dropdown.is-open .mobile-submenu {
  max-height: 320px;
  opacity: 1;
  margin: 0 0 12px 2px !important;
}

.mobile-menu ul li .mobile-submenu li a.mobile-sublink {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px;
  padding: 10px 4px 10px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #344054 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  width: 100% !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mobile-sublink__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-sublink__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  color: var(--color-primary);
}

.mobile-sublink__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-menu ul li .mobile-submenu li a.mobile-sublink .dropdown-item-arrow {
  color: #64748B;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mobile-menu ul li .mobile-submenu li a.mobile-sublink::after {
  display: none !important;
}

.mobile-menu ul li .mobile-submenu li a.mobile-sublink:hover,
.mobile-menu ul li .mobile-submenu li a.mobile-sublink:active {
  color: var(--color-primary) !important;
}

.mobile-menu ul li .mobile-submenu li a.mobile-sublink:hover .dropdown-item-arrow,
.mobile-menu ul li .mobile-submenu li a.mobile-sublink:active .dropdown-item-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-submenu,
  .mobile-dropdown-chevron,
  .mobile-dropdown-toggle {
    transition: none;
  }
}

.mobile-menu .login-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px 32px;
}

.mobile-menu ul li a.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border-bottom: 0;
  font-size: 16px;
  color: #151515 !important;
  text-align: center;
}

/* Keep the back-to-top button out of the open menu */
body:has(.mobile-menu.active) .back-to-top-btn {
  display: none !important;
}

@media (max-width: 991px) {
  .hamburger {
    display: flex;
  }

  .site-header nav,
  .site-header .header-nav,
  .site-header .nav-menu,
  .site-header .login-btn,
  .d-flex.align-items-center.gap-4 {
    display: none !important;
  }

  .site-header {
    padding: 12px 20px;
    justify-content: space-between !important;
  }
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
.site-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #E7E4DF !important;
  padding: 36px 0 11px !important;
  position: relative !important;
  z-index: 10 !important;
  font-family: 'Outfit', sans-serif !important;
  color: #334155 !important;
  margin-top: auto;
}

.site-footer a {
  text-decoration: none !important;
}

.site-footer .container,
.site-footer .footer-container {
  max-width: 1230px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr !important;
  gap: 40px !important;
  align-items: start !important;
}

.footer-column {
  display: flex !important;
  flex-direction: column !important;
}

.brand-column {
  align-items: flex-start !important;
}

.brand-column .footer-logo {
  margin-bottom: 8px !important;
  margin-left: -14px !important;
}

.brand-column .footer-logo img {
  height: 100px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
  margin: 0 !important;
  display: block !important;
}

.brand-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
  margin: 8px 0 16px !important;
  text-align: left !important;
}

.social-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 15px !important;
}

.social-icon-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.social-icon-circle svg {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.3s ease !important;
}

.social-icon-circle:hover {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.linkedin-circle:hover {
  background: #0077b5 !important;
  border-color: #0077b5 !important;
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.2) !important;
}

.youtube-circle:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2) !important;
}

.x-circle:hover {
  background: #0f1419 !important;
  border-color: #0f1419 !important;
  box-shadow: 0 4px 12px rgba(15, 20, 25, 0.15) !important;
}

.instagram-circle:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(220, 39, 67, 0.2) !important;
}

.facebook-circle:hover {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2) !important;
}

.column-header,
.column-header-static {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f67214 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 24px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

.column-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.column-links li {
  display: flex !important;
  align-items: center !important;
}

.column-links a {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #0f172a !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  padding-left: 18px !important;
  display: inline-block !important;
  text-align: left !important;
}

.column-links a::before {
  content: ">" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  color: #64748b !important;
  transition: all 0.25s ease !important;
  font-family: var(--font-body) !important;
}

.column-links a:hover {
  color: #f67214 !important;
  padding-left: 22px !important;
}

.column-links a:hover::before {
  color: #f67214 !important;
  left: 4px !important;
}

.newsletter-column {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.newsletter-column .column-header-static {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f67214 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 24px !important;
  text-transform: uppercase !important;
}

.newsletter-col-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  margin: -12px 0 16px 0 !important;
  font-family: 'Outfit', sans-serif !important;
}

.newsletter-col-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.newsletter-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 0 40px 0 42px !important;
  height: 46px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
}

.newsletter-input-wrapper:hover {
  border-color: #94a3b8 !important;
}

.newsletter-input-wrapper:focus-within {
  border-color: #f67214 !important;
  box-shadow: 0 0 0 3.5px rgba(246, 114, 20, 0.12) !important;
}

.newsletter-input-wrapper .input-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  transition: color 0.3s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.newsletter-input-wrapper:focus-within .input-icon {
  color: #f67214 !important;
}

.newsletter-input-wrapper:has(.newsletter-col-input:not(:placeholder-shown):valid) .input-icon {
  color: #10b981 !important;
}

.newsletter-col-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 0 !important;
}

.newsletter-col-input::placeholder {
  color: #94a3b8 !important;
}

.newsletter-validation-status {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0.8) !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.val-check-icon {
  width: 14px !important;
  height: 14px !important;
  color: #10b981 !important;
}

.newsletter-col-input:focus:valid~.newsletter-validation-status,
.newsletter-col-input:not(:placeholder-shown):valid~.newsletter-validation-status {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

.newsletter-submit-btn {
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f67214 0%, #ff832b 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(246, 114, 20, 0.15) !important;
  width: 100% !important;
}

.newsletter-submit-btn:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(246, 114, 20, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

.newsletter-submit-btn:hover:not(:disabled) .submit-btn-arrow {
  transform: translateX(3px) !important;
}

.newsletter-submit-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.9 !important;
}

.submit-btn-arrow {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.3s ease !important;
}

.newsletter-submit-btn.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.20) !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mobile-social-section {
  display: none !important;
  margin-top: 24px !important;
  text-align: center !important;
  width: 100% !important;
}

.mobile-social-header {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f67214 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  font-family: 'Outfit', sans-serif !important;
  text-align: center !important;
}

.footer-bottom-bar {
  margin-top: 40px !important;
  padding-top: 24px !important;
  border-top: 1px solid #E2DED6 !important;
  text-align: center !important;
}

.copyright-text {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  text-align: center !important;
}

.copyright-link {
  color: #f67214 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: opacity 0.25s ease !important;
}

.copyright-link:hover {
  opacity: 0.85 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 95px;
  right: 30px;
  width: 46px;
  height: 46px;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(17, 20, 24, 0.28);
  z-index: 999;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
}

.back-to-top-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.back-to-top-btn:hover {
  background: #FF8A33;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(17, 20, 24, 0.32);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 25px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .collapsible-column {
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 15px !important;
  }

  .collapsible-column .column-header {
    margin-bottom: 0 !important;
    cursor: pointer !important;
    padding: 10px 0 !important;
    user-select: none !important;
  }

  .collapsible-column .column-header .accordion-icon {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #f67214 !important;
    border-bottom: 2px solid #f67214 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s ease !important;
    margin-right: 8px !important;
  }

  .collapsible-column.active .column-header .accordion-icon {
    transform: rotate(-135deg) !important;
  }

  .collapsible-column .column-links {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1) !important;
    gap: 10px !important;
    padding-left: 5px !important;
  }

  .collapsible-column.active .column-links {
    max-height: 1000px !important;
    transition: max-height 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }

  .brand-column {
    align-items: center !important;
    text-align: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 24px !important;
  }

  .brand-desc {
    text-align: center !important;
  }

  .brand-column .social-row {
    display: none !important;
  }

  .mobile-social-section {
    display: block !important;
  }

  .mobile-social-section .social-row {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }

  .footer-bottom-bar {
    margin-top: 30px !important;
    padding-top: 20px !important;
  }

  .copyright-text {
    font-size: 14px !important;
  }

  .newsletter-column {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 24px !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 15px !important;
  }

  .newsletter-col-desc {
    text-align: center !important;
    margin: 0 0 16px 0 !important;
  }

  .newsletter-col-form {
    max-width: 380px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .gbk {
    padding: 100px 16px 40px;
  }
}

/* ==========================================================================
   Lens360 Page Specific Styles (Merged from lens360.css)
   Theme: "The Drawing Set": warm drafting canvas, hairline rules, survey grid.
   Type: Outfit (display) + Instrument Sans (body)
   ========================================================================== */

/* ==========================================================================
   1. Lens360 Design Tokens
   ========================================================================== */
:root {
  /* Surfaces */
  --lx-canvas: #FCFBF8;
  --lx-surface: #FFFFFF;
  --lx-subtle: #F4F2EE;
  --lx-dark: #111111;
  --lx-dark-2: #1A1A1A;

  /* Text */
  --lx-ink: #151515;
  --lx-text: #151515;
  --lx-text-2: #5F6368; /* secondary text */
  --lx-muted: #80868B;
  --lx-on-dark: #FCFBF8;
  --lx-on-dark-muted: rgba(252, 251, 248, 0.66);

  /* Lines */
  --lx-line: #E7E4DF;
  --lx-line-soft: #EFECE6;
  --lx-line-strong: #D6D1C8;
  --lx-line-dark: #2A2A2A;

  /* Signal */
  --lx-orange: #F67214;
  --lx-orange-hover: #E05F03;
  --lx-orange-ink: #B4500B; /* small orange text on light backgrounds (AA) */
  --lx-orange-tint: rgba(246, 114, 20, 0.08);

  /* Type */
  --lx-font-display: 'Outfit', sans-serif;
  --lx-font-body: 'Instrument Sans', sans-serif;
  --lx-font-mono: 'Instrument Sans', sans-serif;

  /* Layout */
  --lx-max: 1440px;
  --lx-gutter: 24px;
  --lx-col-gap: 24px;
  --lx-section: clamp(56px, 6vw + 16px, 72px);
  --lx-section-xl: clamp(72px, 8vw + 8px, 104px);
  --lx-header: 74.6px;

  /* Shape */
  --lx-r-sm: 8px;
  --lx-r-md: 12px;
  --lx-shadow: 0 1px 2px rgba(21, 21, 21, 0.04), 0 18px 36px -24px rgba(21, 21, 21, 0.28);

  /* Motion */
  --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-fast: 160ms;
  --lx-base: 320ms;
  --lx-slow: 700ms;
}

/* ==========================================================================
   2. Base (scoped; zero-specificity resets so component classes win)
   ========================================================================== */
.lx {
  width: 100%;
  flex: 1 0 auto;
  font-family: var(--lx-font-body);
  font-weight: 400;
  color: var(--lx-text);
  text-align: left;
  background: var(--lx-canvas);
}

:where(.lx) :is(h1, h2, h3, h4, p, ol, ul, li, figure) {
  margin: 0;
  padding: 0;
}

:where(.lx) :is(ol, ul) {
  list-style: none;
}

.lx section {
  scroll-margin-top: var(--lx-header);
}

.lx-wrap {
  width: 100%;
  max-width: var(--lx-max);
  margin-inline: auto;
  padding-inline: var(--lx-gutter);
}

/* ==========================================================================
   3. Shared Components
   ========================================================================== */
.lx-h2 {
  font-family: var(--lx-font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lx-text);
  text-wrap: balance;
}

.lx-head {
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.lx-head .lx-h2 {
  max-width: 20ch;
}

/* Architectural technical label: mono caps with a square orange anchor */
.lx-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-text-2);
}

.lx-label::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--lx-orange);
}

.lx-label span {
  color: var(--lx-text);
}

.lx-dark .lx-label {
  color: var(--lx-on-dark-muted);
}

.lx-dark .lx-label span {
  color: var(--lx-on-dark);
}

.lx-split .lx-label {
  grid-column: 1 / -1;
}

/* Heading left, supporting line right, bottom-aligned */
.lx-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lx-col-gap);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.lx-split .lx-h2 {
  grid-column: 1 / span 7;
}

.lx-split__text {
  grid-column: 9 / span 4;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--lx-text-2);
}

/* Buttons */
.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 13px 24px;
  border: 1.5px solid var(--lx-orange);
  border-radius: var(--lx-r-sm);
  background: var(--lx-orange);
  color: var(--lx-ink);
  font-family: var(--lx-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lx-fast) ease, border-color var(--lx-fast) ease, color var(--lx-fast) ease, transform var(--lx-base) var(--lx-ease);
}

.lx-btn:hover {
  border-color: var(--lx-orange-hover);
  background: var(--lx-orange-hover);
  color: var(--lx-ink);
  transform: translateY(-1px);
}

.lx-btn--lg {
  min-height: 0;
  padding: 16px 28px;
  font-size: 16px;
}

.lx-btn--ghost {
  border-color: var(--lx-ink);
  background: transparent;
  color: var(--lx-ink);
}

.lx-btn--ghost:hover {
  border-color: var(--lx-ink);
  background: var(--lx-ink);
  color: #FFFFFF;
}

.lx-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--lx-base) var(--lx-ease);
}

.lx-btn:hover .lx-arrow {
  transform: translateX(3px);
}

/* Scroll reveal: section headings and key blocks only */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--lx-slow) var(--lx-ease), transform var(--lx-slow) var(--lx-ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Dark sections */
.lx-dark {
  background: var(--lx-dark);
  color: var(--lx-on-dark);
}

.lx-dark :is(h2, h3) {
  color: var(--lx-on-dark);
}

.lx-dark .lx-split__text {
  color: var(--lx-on-dark-muted);
}

/* ==========================================================================
   4. Hero: Lens360 Hero Section per Complete Design & Build Guide
   ========================================================================== */
:root {
  --lx-hero-bg: #FAFAF8;
  --lx-hero-text: #171717;
  --lx-hero-text-sec: #5F6368;
  --lx-hero-orange: #F67214;
  --lx-hero-orange-hover: #D85F0F;
  --lx-hero-border: #E6E4DF;
  --lx-hero-container: 1440px;
}

.lx-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--lx-hero-bg);
  padding-top: clamp(80px, 7.8vw, 112px);
  padding-bottom: clamp(60px, 6vw, 84px);
  min-height: auto;
  display: flex;
  align-items: center;
}

/* Subtle architectural hairline grid background (opacity ~0.035, grid size ~56px) */
.lx-hero__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(230, 228, 223, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 228, 223, 0.45) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(circle at 60% 40%, #000 30%, transparent 85%);
  opacity: 0.65;
}

/* 1440px max-width centered container for expansive modern hero */
.lx-hero__container {
  width: 100%;
  max-width: var(--lx-hero-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.2vw, 36px);
  position: relative;
  z-index: 1;
}

/* Two-part composition: Left Content (~47%), Right Visual (~53% larger box) */
.lx-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  column-gap: clamp(36px, 4vw, 56px);
  row-gap: 36px;
  align-items: center;
}

/* --- Left Column: Content --- */
.lx-hero__copy {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Eyebrow label per DESIGN.txt */
.lx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--lx-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lx-hero-text-sec);
}

.lx-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-hero-orange);
  box-shadow: 0 0 0 2.5px rgba(246, 114, 20, 0.22);
  flex-shrink: 0;
}

.lx-hero__eyebrow-brand {
  color: var(--lx-hero-orange);
  font-weight: 700;
}

.lx-hero__eyebrow-sep {
  opacity: 0.5;
  margin-inline: 2px;
}

.lx-hero__eyebrow-sub {
  text-transform: uppercase;
}

/* Main Headline: Turn Jobsite Data (charcoal) Into Decisions. (orange) per DESIGN.txt */
.lx-hero__title {
  font-family: var(--lx-font-display);
  font-size: clamp(2.55rem, 3.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--lx-hero-text);
  margin-bottom: 0;
}

.lx-hero__title-line1 {
  display: block;
  white-space: nowrap;
  color: var(--lx-hero-text);
  /* Typographic optical alignment: subtle hang for 'T' top crossbar */
  margin-left: -0.035em;
}

.lx-hero__title-line2 {
  display: block;
  white-space: nowrap;
  color: var(--lx-hero-orange);
  /* Typographic optical alignment: subtle inset so the 'I' stem aligns with the 'Turn' stem axis */
  padding-left: 0.05em;
}

/* Product Introduction: Outfit 700, clean editorial subhead */
.lx-hero__intro {
  margin-top: 20px;
  margin-bottom: 12px;
  font-family: var(--lx-font-display);
  font-size: clamp(1.3rem, 1.48vw, 1.58rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #151515;
}

/* Description paragraph: High-contrast, wider column, and superior readability */
.lx-hero__desc {
  max-width: 650px;
  margin-bottom: 24px;
  font-family: var(--lx-font-body);
  font-size: clamp(1.1rem, 1.22vw, 1.25rem);
  font-weight: 450;
  line-height: 1.62;
  color: #2D3139;
  letter-spacing: -0.005em;
}

/* Final Statement Sentence: Instrument Sans 600, with subtle orange accent */
.lx-hero__statement {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--lx-font-body);
  font-size: clamp(1.02rem, 1.08vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
  color: #151515;
  padding-left: 16px;
}

.lx-hero__statement::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  height: 20px;
  background: var(--lx-hero-orange);
  border-radius: 2px;
}

/* --- Right Column: Interactive Comparison Slider (16:10 widescreen landscape rectangle) --- */
.lx-hero__visual {
  position: relative;
  width: 100%;
}

.lx-slider {
  --pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  border-radius: 14px;
  overflow: hidden;
  background: #1C1B1A;
  border: 1px solid var(--lx-hero-border);
  box-shadow:
    0 2px 6px rgba(17, 20, 24, 0.06),
    0 24px 60px -20px rgba(17, 20, 24, 0.25);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.lx-slider__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lx-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* After layer (Lens360 Intelligence) clipped to the right of the slider */
.lx-slider__layer--after {
  clip-path: inset(0 0 0 var(--pos, 50%));
  -webkit-clip-path: inset(0 0 0 var(--pos, 50%));
  z-index: 1;
}

/* Before layer (Field Capture) clipped to the left of the slider */
.lx-slider__layer--before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  z-index: 2;
}

/* Badges for Image 1 and Image 2 */
.lx-slider__badge {
  position: absolute;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-family: var(--lx-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #171717;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.lx-slider__badge--before {
  left: 16px;
}

.lx-slider__badge--after {
  right: 16px;
}

.lx-slider__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lx-slider__badge-dot--gray {
  background: #78716C;
}

.lx-slider__badge-dot--orange {
  background: var(--lx-hero-orange);
  box-shadow: 0 0 0 2.5px rgba(246, 114, 20, 0.25);
}

/* ==========================================================================
   Lens360 Intelligence Annotations (Point Style + Dimension + Deviation Pill)
   ========================================================================== */
.lx-slider__annotations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   1. Point Style Label with Leader Line (COORDINATED BIM)
   -------------------------------------------------------------------------- */
.lx-callout-point {
  position: absolute;
  top: 13.5%;
  left: 54%;
  display: flex;
  align-items: center;
}

/* Target circular anchor dot on the model */
.lx-callout-point__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #0284C7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  z-index: 2;
}

.lx-callout-point__dot::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 50%;
  background: #0284C7;
}

/* Crisp horizontal leader line */
.lx-callout-point__line {
  width: 26px;
  height: 1.5px;
  background: #0284C7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Sleek white pill card */
.lx-callout-point__card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 9px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px -6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.lx-callout-point__icon {
  width: 17px;
  height: 17px;
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lx-callout-point__icon svg {
  width: 100%;
  height: 100%;
}

.lx-callout-point__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.lx-callout-point__title {
  font-family: var(--lx-font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0284C7;
  line-height: 1.15;
}

.lx-callout-point__sub {
  font-family: var(--lx-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5F6368;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   2. Elevation Dimension Marker on the Orange Duct
   -------------------------------------------------------------------------- */
.lx-dim-marker {
  position: absolute;
  top: 27%;
  left: 45.5%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Vertical dimension guideline with T-bar end caps */
.lx-dim-marker__ticks {
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.lx-dim-marker__line {
  flex: 1;
  width: 0;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.lx-dim-marker__cap {
  width: 12px;
  height: 1.5px;
  background: #FFFFFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Orange elevation badge */
.lx-dim-marker__badge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 9px 3px;
  background: #F67214;
  border: 1.5px solid #FFFFFF;
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(246, 114, 20, 0.35);
  text-align: center;
  line-height: 1;
}

.lx-dim-marker__val {
  font-family: var(--lx-font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.lx-dim-marker__label {
  font-family: var(--lx-font-body);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   3. Sleek Bottom Deviation Card (matching reference layout)
   -------------------------------------------------------------------------- */
.lx-issue-card {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-left: 4px solid #EF4444;
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12),
    0 16px 32px -8px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

/* Pulsing red alert indicator dot */
.lx-issue-card__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
  flex-shrink: 0;
  animation: pulseIssue 1.8s ease-in-out infinite;
}

@keyframes pulseIssue {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
}

.lx-issue-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.lx-issue-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-issue-card__title {
  font-family: var(--lx-font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #DC2626;
  line-height: 1.15;
}

.lx-issue-card__priority {
  font-family: var(--lx-font-body);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #FEE2E2;
  color: #B91C1C;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.15;
}

.lx-issue-card__desc {
  margin: 0;
  font-family: var(--lx-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: #4B5563;
  line-height: 1.2;
}

/* Divider Line */
.lx-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}

/* Circular handle */
.lx-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(230, 228, 223, 0.95);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lx-hero-orange);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lx-slider:hover .lx-slider__handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.24),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.lx-slider__handle-arrows {
  width: 18px;
  height: 18px;
  stroke: var(--lx-hero-orange);
}

/* The range input is invisible, so the whole slider shows the focus ring */
.lx-slider:has(.lx-slider__range:focus-visible) {
  outline: 2px solid var(--lx-orange);
  outline-offset: 3px;
}

.lx-slider__range:focus-visible {
  outline: none;
}

/* Range Input Overlay */
.lx-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 5;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.lx-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 100%;
  cursor: ew-resize;
}

.lx-slider__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  cursor: ew-resize;
}

/* ==========================================================================
   Hero refinement: same composition, more polish
   (palette-true callouts, framed slider, quieter type hierarchy)
   ========================================================================== */
.lx-hero {
  background:
    radial-gradient(60% 70% at 82% 38%, rgba(246, 114, 20, 0.09), transparent 70%),
    linear-gradient(180deg, #FCFBF8 0%, var(--lx-hero-bg) 100%);
  border-bottom: 1px solid var(--lx-line);
}

.lx-hero__eyebrow {
  gap: 9px;
  margin-bottom: 22px;
  align-self: flex-start;
  flex-wrap: wrap;
}

/* Flush-left headline: both lines start on the same edge */
.lx-hero__title-line1 {
  margin-left: 0;
}

.lx-hero__title-line2 {
  padding-left: 0;
}

.lx-hero__title {
  font-size: clamp(2.6rem, 4.1vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lx-hero__intro {
  margin-top: 26px;
  margin-bottom: 10px;
  max-width: 650px;
}

.lx-hero__desc {
  color: #3A3F47;
}

.lx-hero__statement {
  margin-top: 4px;
  padding-left: 18px;
}

/* Slider: clean edge, no frame or shadow */
.lx-slider {
  border: 1px solid var(--lx-hero-border);
  border-radius: 18px;
  box-shadow: none;
}

/* Handle: solid orange, white arrows */
.lx-slider__handle {
  width: 44px;
  height: 44px;
  border: 3px solid #FFFFFF;
  background: var(--lx-hero-orange);
  box-shadow: 0 0 0 5px rgba(246, 114, 20, 0.22), 0 8px 22px rgba(0, 0, 0, 0.3);
}

.lx-slider__handle-arrows {
  stroke: #FFFFFF;
}

/* Callouts stay on-palette: orange for findings, no blue/red */
.lx-callout-point__dot {
  border-color: var(--lx-hero-orange);
  box-shadow: 0 0 0 2px rgba(246, 114, 20, 0.28), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lx-callout-point__dot::after,
.lx-callout-point__line {
  background: var(--lx-hero-orange);
}

.lx-callout-point__icon,
.lx-callout-point__title {
  color: var(--lx-orange-ink);
}

.lx-issue-card {
  border-left-color: var(--lx-hero-orange);
}

.lx-issue-card__dot {
  background: var(--lx-hero-orange);
  box-shadow: 0 0 0 3px rgba(246, 114, 20, 0.25);
}

.lx-issue-card__title {
  color: var(--lx-orange-ink);
}

.lx-issue-card__priority {
  background: #FFF1E6;
  color: var(--lx-orange-ink);
}

@media (max-width: 1023px) {
  .lx-hero__title { font-size: clamp(2.3rem, 7vw, 3.4rem); }
  .lx-hero__intro { margin-top: 22px; }
}

@media (max-width: 767px) {
  .lx-hero__eyebrow { margin-bottom: 18px; }
  .lx-slider { border-radius: 14px; }
  .lx-slider__handle { width: 38px; height: 38px; }
}


/* ==========================================================================
   5. Process: From Jobsite Capture to Action
      Desktop: the section pins to the screen while you scroll; each scroll
      "step" opens the next step and cross-fades its image, then the page
      carries on. Without room/JS/with reduced motion it is a plain list with
      a sticky image panel. Tablets & phones show each image inside its step.
   ========================================================================== */
.lx-process {
  padding-block: var(--lx-section);
  border-top: 1px solid var(--lx-line);
  background: var(--lx-canvas);
}

.lx-process .lx-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.lx-process .lx-head .lx-h2 {
  max-width: none;
}

.lx-process__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lx-col-gap);
  align-items: start;
}

/* --- Steps --- */
.lx-steps {
  grid-column: 1 / span 6;
  position: relative;
}

.lx-step {
  --dot: 25px; /* distance from the step's top edge to its rail dot */
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  align-items: baseline;
  padding: 18px 16px 18px 44px;
  border-radius: var(--lx-r-md);
  cursor: pointer;
}

/* Rail dot */
.lx-step::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--dot);
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--lx-line-strong);
  border-radius: 50%;
  background: var(--lx-canvas);
  transition: background-color var(--lx-base) ease, border-color var(--lx-base) ease, box-shadow var(--lx-base) ease;
}

/* Rail segment from this dot to the next; fills orange once the next step is reached */
.lx-step::after {
  content: "";
  position: absolute;
  top: var(--dot);
  bottom: calc(-1 * var(--dot));
  left: 5px;
  width: 2px;
  border-radius: 2px;
  background:
    linear-gradient(var(--lx-orange), var(--lx-orange)) top / 100% 0 no-repeat,
    var(--lx-line-strong);
  transition: background-size 500ms var(--lx-ease);
}

.lx-step.is-linked::after {
  background-size: 100% 100%;
}

.lx-step:last-child::after {
  display: none;
}

.lx-step.is-reached::before {
  border-color: var(--lx-orange);
  background: var(--lx-orange);
}

.lx-step.is-current::before {
  box-shadow: 0 0 0 5px rgba(246, 114, 20, 0.2);
}

.lx-step__num {
  font-family: var(--lx-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--lx-muted);
  transition: color var(--lx-base) ease;
}

.lx-step.is-current .lx-step__num {
  color: var(--lx-orange-ink);
}

.lx-step__title {
  font-family: var(--lx-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lx-ink);
  transition: color var(--lx-base) ease;
}

.lx-step__text {
  grid-column: 2;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: #2D3139;
  transition: color var(--lx-fast) ease;
}

.lx-step.is-current .lx-step__text {
  color: var(--lx-ink);
}

/* Per-step image: phones and tablets only */
.lx-step__media {
  display: none;
}

/* --- Image stage: the camera "viewfinder" --- */
.lx-stage {
  grid-column: 7 / span 6;
  position: sticky;
  top: calc(var(--lx-header) + 28px);
  max-width: 580px;
  justify-self: end;
  width: 100%;
  align-self: center;
}

.lx-stage__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(21, 21, 21, 0.08);
  border-radius: 18px;
  background: var(--lx-subtle);
  box-shadow: 0 2px 6px rgba(21, 21, 21, 0.06), 0 28px 48px -28px rgba(21, 21, 21, 0.4);
}

.lx-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 600ms ease, transform 900ms var(--lx-ease);
}

.lx-stage__img.is-active {
  opacity: 1;
  transform: none;
}

/* Camera-viewfinder corner marks */
.lx-stage__brackets {
  --b: var(--lx-orange);
  position: absolute;
  inset: 16px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(17, 17, 17, 0.35));
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 18px 2px,
    linear-gradient(var(--b), var(--b)) 0 0 / 2px 18px,
    linear-gradient(var(--b), var(--b)) 100% 0 / 18px 2px,
    linear-gradient(var(--b), var(--b)) 100% 0 / 2px 18px,
    linear-gradient(var(--b), var(--b)) 0 100% / 18px 2px,
    linear-gradient(var(--b), var(--b)) 0 100% / 2px 18px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 18px 2px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 2px 18px;
  background-repeat: no-repeat;
}

/* Five-segment progress under the frame */
.lx-stage__bar {
  display: flex;
  gap: 6px;
  margin-top: 20px;
}

.lx-stage__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--lx-line-strong);
  transition: background-color var(--lx-base) ease;
}

.lx-stage__seg.is-on {
  background: var(--lx-orange);
}

.lx-stage__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.lx-stage__counter {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--lx-orange-ink);
}

.lx-stage__title {
  font-family: var(--lx-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}

/* --- Pinned scroll story (desktop; switched on by script.js) ---
   The layout is NOT changed. When the whole block fits on screen, heading, steps
   and image simply hold their place under the header while the page scrolls
   through an invisible runway; the scroll position picks the step. */
.lx-process__runway {
  display: none;
}

.lx-process.is-pinned .lx-process__pin {
  position: sticky;
  top: calc(var(--lx-header) + 24px); /* keep in sync with STICK_GAP in script.js */
}

.lx-process.is-pinned .lx-process__runway {
  display: block;
  height: 247.5vh; /* 5.5 scroll steps of 45vh; keep in sync with HOLD in script.js */
}

/* The pin already holds everything still, so the stage needs no sticky of its own */
.lx-process.is-pinned .lx-stage {
  position: relative;
  top: auto;
}

/* --- Tablet & phone: no stage; image sits inside each step --- */
@media (max-width: 1023px) {
  .lx-steps {
    grid-column: 1 / -1;
  }

  .lx-stage {
    display: none;
  }

  .lx-step {
    cursor: default;
    padding-right: 0;
  }

  .lx-step__text {
    max-width: 56ch;
  }

  .lx-step__media {
    display: block;
    grid-column: 2;
    max-width: 640px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-r-md);
    background: var(--lx-subtle);
  }

  .lx-step__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .lx-step {
    --dot: 31px;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 6px;
    padding: 24px 0 24px 36px;
  }

  .lx-step__text {
    font-size: 1.0625rem;
  }
}

/* Tablet (640-1023px): text on the left, a small image on the right of each step */
@media (min-width: 640px) and (max-width: 1023px) {
  .lx-step {
    --dot: 29px;
    grid-template-columns: 36px minmax(0, 1fr) clamp(200px, 34vw, 280px);
    padding: 22px 0 22px 44px;
  }

  .lx-step__title,
  .lx-step__text {
    grid-column: 2;
  }

  .lx-step__media {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    max-width: none;
    margin-top: 0;
  }
}

/* ==========================================================================
   6. Technology (dark): six capabilities, then the result
   ========================================================================== */
.lx-tech {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--lx-section);
}

/* Faint survey grid, as in the hero and closing band */
.lx-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(252, 251, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 251, 248, 0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.lx-tech .lx-split {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.lx-tech .lx-split {
  display: block;
}

.lx-tech .lx-split .lx-h2 {
  max-width: 20ch;
}

.lx-tech .lx-split__text {
  max-width: 62ch;
  margin-top: 20px;
  padding-left: 20px;
  border-left: 3px solid var(--lx-orange);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: rgba(252, 251, 248, 0.82);
  text-wrap: pretty;
}

/* --- Capabilities: 3 x 2 ruled grid --- */
.lx-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.6vw, 56px);
  row-gap: clamp(28px, 3vw, 40px);
}

.lx-cap {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding-top: 22px;
  border-top: 1px solid var(--lx-line-dark);
}

.lx-cap__icon {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(246, 114, 20, 0.45);
  border-radius: 50%;
  background: rgba(246, 114, 20, 0.08);
  color: var(--lx-orange);
  transition: background-color var(--lx-base) ease, color var(--lx-base) ease, border-color var(--lx-base) ease;
}

.lx-cap__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lx-cap:hover .lx-cap__icon {
  border-color: var(--lx-orange);
  background: var(--lx-orange);
  color: var(--lx-dark);
}

.lx-cap__title {
  font-family: var(--lx-font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lx-on-dark);
}

.lx-cap__text {
  max-width: 34ch;
  margin-top: 6px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(252, 251, 248, 0.74);
}

/* --- The result: closes the section --- */
.lx-result {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 22px clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--lx-line-dark);
  border-radius: 14px;
  background: var(--lx-dark-2);
  font-family: var(--lx-font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--lx-on-dark);
}

.lx-result::before {
  content: "";
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--lx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.lx-result em {
  font-style: normal;
  color: var(--lx-orange);
}

/* --- Tablet --- */
@media (max-width: 1023px) {
  .lx-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Phone: one column, compact rows --- */
@media (max-width: 767px) {
  .lx-caps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .lx-cap {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding-top: 18px;
  }

  .lx-cap__icon {
    width: 44px;
    height: 44px;
  }

  .lx-cap__text {
    font-size: 1rem;
  }


}

/* ==========================================================================
   7. Use Cases: tabs
   ========================================================================== */
.lx-answers {
  padding-block: var(--lx-section);
  background: var(--lx-canvas);
}

.lx-answers .lx-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.lx-answers .lx-head .lx-h2 {
  max-width: none;
}

.lx-tabs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lx-col-gap);
  align-items: start;
}

.lx-tabs__list {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lx-line);
  position: sticky;
  top: calc(var(--lx-header) + 28px);
}

.lx-tab {
  position: relative;
  width: 100%;
  padding: 24px 44px 24px 22px;
  border-bottom: 1px solid var(--lx-line);
  text-align: left;
  font-family: var(--lx-font-body);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lx-text-2);
  transition: color var(--lx-fast) ease;
}

.lx-tab::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 2px;
  background: var(--lx-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--lx-base) var(--lx-ease);
}

.lx-tab:hover,
.lx-tab[aria-selected="true"] {
  color: var(--lx-text);
}

.lx-tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

/* Arrow that points at the open panel */
.lx-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  background: var(--lx-orange);
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity var(--lx-base) ease, transform var(--lx-base) var(--lx-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lx-tab[aria-selected="true"]::after,
.lx-tab:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.lx-tabs__panels {
  grid-column: 6 / span 7;
  max-width: 760px;
  justify-self: end;
  width: 100%;
}

.lx-panel:not([hidden]) {
  animation: lx-panel-in 420ms var(--lx-ease);
}


.lx-panel:focus-visible {
  outline: 2px solid var(--lx-orange);
  outline-offset: 8px;
}

.lx-panel__media {
  overflow: hidden;
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  background: var(--lx-subtle);
}

.lx-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.lx-panel__body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 44px);
  align-items: baseline;
  padding-top: 22px;
  padding-inline: 0;
}

.lx-panel__title {
  font-family: var(--lx-font-display);
  font-size: clamp(1.35rem, 1.25vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lx-ink);
}

.lx-panel__body p {
  font-family: var(--lx-font-body);
  font-size: clamp(1.1rem, 1.22vw, 1.25rem);
  font-weight: 450;
  line-height: 1.62;
  color: #2D3139;
  letter-spacing: -0.005em;
}

.lx-note {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--lx-line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--lx-text-2);
  margin: 20px 0 0;
}

@keyframes lx-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   8. Custom Reports
   ========================================================================== */
.lx-custom {
  padding-block: clamp(48px, 4.5vw, 64px);
  background: var(--lx-subtle);
}

.lx-custom .lx-split {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.lx-custom .lx-split__text {
  text-wrap: balance;
}

.lx-custom__body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  column-gap: clamp(28px, 3.4vw, 48px);
  align-items: stretch;
}

/* Left: Interactive architectural capability tiles */
.lx-challenges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lx-challenges li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 18px 16px;
  border: 1px solid var(--lx-line);
  border-radius: 12px;
  background: var(--lx-surface);
  font-family: var(--lx-font-display);
  font-size: clamp(1.05rem, 1.05vw, 1.15rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
  cursor: default;
  transition: border-color var(--lx-fast) ease, transform var(--lx-base) var(--lx-ease);
}

.lx-challenges li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  background: var(--lx-orange);
}

.lx-challenges li::after {
  content: none;
}

.lx-challenges li:hover {
  border-color: rgba(246, 114, 20, 0.55);
  transform: translateY(-2px);
}



/* Right: Workflow Blueprint Card */
.lx-report {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--lx-line);
  border-radius: 16px;
  background: var(--lx-surface);
  box-shadow: 0 1px 2px rgba(21, 21, 21, 0.03), 0 18px 36px -26px rgba(21, 21, 21, 0.28);
}

/* Workflow: icon nodes joined by connectors that fill in sequence */
.lx-flow {
  --lx-node: 50px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 30px clamp(14px, 2vw, 22px) 24px;
  list-style: none;
  margin: 0;
}

.lx-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  text-align: center;
}

.lx-flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--lx-node);
  height: var(--lx-node);
  border: 1.5px solid #1C1917;
  border-radius: 50%;
  background: var(--lx-surface);
  color: var(--lx-ink);
  transition: transform var(--lx-fast) ease, box-shadow var(--lx-fast) ease;
}

.lx-flow__node svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lx-flow__step--input .lx-flow__node {
  border-style: dashed;
  border-color: #A8A29E;
  background: var(--lx-canvas);
}

.lx-flow__step--expert .lx-flow__node {
  border-color: #111111;
  background: #111111;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.lx-flow__step--output .lx-flow__node {
  border-color: var(--lx-orange);
  background: var(--lx-orange);
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(246, 114, 20, 0.2);
}

.lx-flow__step:hover .lx-flow__node {
  transform: translateY(-2px);
}

.lx-flow__label {
  margin-top: 14px;
  font-family: var(--lx-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #171717;
  line-height: 1.25;
}

.lx-flow__step--output .lx-flow__label {
  color: var(--lx-orange-ink);
}

.lx-flow__link {
  position: absolute;
  top: calc(var(--lx-node) / 2 - 1px);
  left: calc(50% + var(--lx-node) / 2 + 6px);
  right: calc(-50% + var(--lx-node) / 2 + 6px);
  height: 2px;
  border-radius: 2px;
  background: var(--lx-line-strong);
}

.lx-flow__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lx-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--lx-ease) calc(250ms + var(--i) * 260ms);
}

.lx-flow__link::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #CBD5E1;
  border-right: 2px solid #CBD5E1;
  transform: rotate(45deg);
  transition: border-color 200ms ease calc(700ms + var(--i) * 260ms);
}

.lx-report.is-in .lx-flow__link::after {
  transform: scaleX(1);
}

.lx-report.is-in .lx-flow__link::before {
  border-color: var(--lx-orange);
}

.lx-report__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 16px clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--lx-line);
  background: var(--lx-canvas);
}

.lx-report__foot p {
  margin: 0;
  font-family: var(--lx-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #171717;
}

.lx-report__foot .lx-btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1.5px solid #171717;
  color: #171717;
}

.lx-report__foot .lx-btn:hover {
  background: #171717;
  color: #FFFFFF;
  border-color: #171717;
  transform: translateY(-1px);
}

/* ==========================================================================
   9. Why Lens360
   ========================================================================== */
.lx-why {
  padding-block: var(--lx-section);
  background: var(--lx-canvas);
}

.lx-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
}

.lx-benefits li {
  position: relative;
  padding: 26px 0 30px;
  border-top: 1px solid var(--lx-line-strong);
}

/* Short orange tick on each rule */
.lx-benefits li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--lx-orange);
}

.lx-benefits h3 {
  font-family: var(--lx-font-display);
  font-size: clamp(1.3rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #111111;
}

.lx-benefits p {
  max-width: 52ch;
  margin-top: 10px;
  font-family: var(--lx-font-body);
  font-size: clamp(0.96rem, 1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.62;
  color: #4B5563;
  letter-spacing: 0;
}

/* The differentiator, set apart on the subtle surface */
.lx-feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--lx-col-gap);
  align-items: center;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
  border-radius: var(--lx-r-md);
  background: var(--lx-subtle);
  border: 1px solid rgba(230, 228, 223, 0.85);
  border-left: 4px solid var(--lx-orange);
}

.lx-feature__title {
  position: relative;
  grid-column: 1 / span 6;
  font-family: var(--lx-font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}


.lx-feature__text {
  grid-column: 7 / span 6;
  padding-left: clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--lx-line-strong);
  font-family: var(--lx-font-body);
  font-size: clamp(1.15rem, 1.25vw, 1.3rem);
  font-weight: 450;
  line-height: 1.65;
  color: #262930;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   10. Final CTA: closing band on the survey grid
   ========================================================================== */
.lx-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--lx-section);
  border-top: 1px solid var(--lx-line);
  background: var(--lx-canvas);
}

/* The photo-to-wireframe image sits on the right and dissolves into the canvas toward the copy */
.lx-cta__bg {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(80%, 1280px);
  background: url("../assets/HEROIMG/cta-banner-2172.webp") right center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0.8) 42%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0.8) 42%, #000 60%);
}

/* Survey grid on the copy side, fading out toward the image */
.lx-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--lx-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--lx-line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 60%);
  mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 60%);
}

.lx-cta__copy {
  max-width: 520px;
}

.lx-cta__title {
  font-family: var(--lx-font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Capture, Verify, Act as a short vertical timeline */
.lx-cta__lines {
  position: relative;
  display: grid;
  row-gap: 14px;
  margin-top: 26px;
}

.lx-cta__lines::before {
  content: "";
  position: absolute;
  top: 0.8em;
  bottom: 0.8em;
  left: 5px;
  width: 1px;
  background: var(--lx-line-strong);
}

.lx-cta__lines li {
  position: relative;
  padding-left: 30px;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--lx-text-2);
}

.lx-cta__lines li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--lx-ink);
  border-radius: 50%;
  background: var(--lx-canvas);
}

.lx-cta__lines li:last-child::before {
  border-color: var(--lx-orange);
  background: var(--lx-orange);
  box-shadow: 0 0 0 4px rgba(246, 114, 20, 0.16);
}

.lx-cta__lines b {
  font-weight: 600;
  color: var(--lx-text);
}

.lx-cta__action {
  margin-top: 30px;
}

.lx-cta .lx-btn,
.lx-cta .lx-btn:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   11. Tablet (≤ 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Hero: stack into single column with optimal breathing room */
  .lx-hero {
    min-height: auto;
    padding-top: calc(var(--lx-header) + 36px);
    padding-bottom: 56px;
  }

  .lx-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .lx-hero__copy {
    max-width: 100%;
  }

  .lx-hero__visual {
    max-width: 820px;
    margin-inline: auto;
  }

  .lx-split .lx-h2,
  .lx-split__text {
    grid-column: 1 / -1;
  }

  .lx-split__text {
    max-width: 56ch;
    margin-top: 16px;
  }


  /* Tabs: one scrollable row above the panel */
  .lx-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-tabs__list,
  .lx-tabs__panels {
    grid-column: 1;
  }

  .lx-tabs__panels {
    max-width: none;
    justify-self: stretch;
  }

  .lx-tabs__list {
    position: static;
    flex-direction: row;
    gap: 28px;
    margin: 0 calc(-1 * var(--lx-gutter)) 28px;
    padding-inline: var(--lx-gutter) 56px;
    border-top: 0;
    border-bottom: 1px solid var(--lx-line);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }

  .lx-tabs__list::-webkit-scrollbar {
    display: none;
  }

  .lx-tab {
    width: auto;
    padding: 14px 0;
    border-bottom: 0;
    font-size: 17px;
    white-space: nowrap;
  }

  .lx-tab::after {
    display: none;
  }

  .lx-tab::before {
    top: auto;
    right: 0;
    bottom: -1px;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .lx-tab[aria-selected="true"]::before {
    transform: scaleX(1);
  }

  /* Custom reports: list, then the report panel */
  .lx-custom__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .lx-challenges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
  }

  .lx-feature__title,
  .lx-feature__text {
    grid-column: 1 / -1;
  }

  .lx-feature__text {
    max-width: 56ch;
    margin-top: 18px;
    padding-left: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   12. Phone (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --lx-gutter: 16px;
  }

  .lx-hero {
    padding-top: calc(var(--lx-header) + 24px);
    padding-bottom: 44px;
  }

  .lx-hero__inner {
    row-gap: 32px;
  }

  .lx-hero__eyebrow {
    font-size: 0.68rem;
    gap: 6px;
    margin-bottom: 14px;
  }

  .lx-hero__title {
    font-size: clamp(2.35rem, 8.5vw, 3.2rem);
    line-height: 1.04;
  }

  .lx-hero__title-line1,
  .lx-hero__title-line2 {
    white-space: normal;
  }

  .lx-hero__intro {
    font-size: 1.25rem;
    margin-top: 14px;
    margin-bottom: 12px;
  }

  .lx-hero__desc {
    font-size: 1rem;
    line-height: 1.54;
    margin-bottom: 18px;
  }

  .lx-hero__statement {
    font-size: 0.95rem;
  }

  .lx-slider__badge {
    top: 10px;
    padding: 4px 10px;
    font-size: 0.62rem;
    gap: 6px;
  }

  .lx-slider__badge--before {
    left: 10px;
  }

  .lx-slider__badge--after {
    right: 10px;
  }

  .lx-slider__handle {
    width: 34px;
    height: 34px;
  }

  .lx-slider__handle-arrows {
    width: 15px;
    height: 15px;
  }

  .lx-callout-point {
    top: 11%;
    left: 48%;
    transform: scale(0.88);
    transform-origin: left center;
  }

  .lx-dim-marker {
    transform: translate(-50%, -50%) scale(0.88);
  }

  .lx-issue-card {
    bottom: 12px;
    right: 12px;
    padding: 7px 11px 7px 10px;
    gap: 8px;
  }

  .lx-issue-card__title {
    font-size: 0.68rem;
  }

  .lx-issue-card__priority {
    font-size: 0.6rem;
    padding: 1.5px 5px;
  }

  .lx-issue-card__desc {
    font-size: 0.64rem;
  }
  /* Tabs: 2 × 2 tiles, no sideways scroll */
  .lx-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lx-tab {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--lx-line);
    border-radius: 10px;
    background: var(--lx-surface);
    font-size: 15px;
    line-height: 1.25;
    white-space: normal;
    transition: border-color var(--lx-fast) ease, background-color var(--lx-fast) ease, color var(--lx-fast) ease;
  }

  .lx-tab::before {
    display: none;
  }

  .lx-tab[aria-selected="true"] {
    border-color: var(--lx-orange);
    background: #FFF4EC;
    color: var(--lx-text);
  }

  .lx-panel__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding-top: 18px;
  }

  /* Custom reports */
  .lx-challenges {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 20px;
    gap: 10px;
  }

  .lx-challenges li {
    padding: 14px 16px;
  }

  /* Workflow stays a single left-to-right row: compact, one glance, no empty space */
  .lx-flow {
    --lx-node: 42px;
    padding: 24px 10px 20px;
  }

  .lx-flow__step {
    padding: 0 2px;
  }

  .lx-flow__node svg {
    width: 18px;
    height: 18px;
  }

  .lx-flow__step--output .lx-flow__node {
    box-shadow: 0 0 0 4px rgba(246, 114, 20, 0.2);
  }

  .lx-flow__label {
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .lx-flow__link {
    left: calc(50% + var(--lx-node) / 2 + 3px);
    right: calc(-50% + var(--lx-node) / 2 + 3px);
  }

  .lx-report__foot {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .lx-report__foot .lx-btn {
    white-space: normal;
  }

  /* Why */
  .lx-benefits {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-benefits li {
    padding: 22px 0 26px;
  }

  .lx-benefits p {
    font-size: 16px;
  }

  /* CTA: copy first, image fades in beneath it */
  .lx-cta {
    padding-bottom: 250px;
  }

  .lx-cta::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  }

  .lx-cta__bg {
    inset: auto 0 0 0;
    width: 100%;
    height: 240px;
    background: url("../assets/HEROIMG/cta-banner-1200.webp") 70% bottom / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  }

  .lx-btn--lg {
    width: 100%;
  }
}

/* ==========================================================================
   13. Small phones (≤ 359px)
   ========================================================================== */
@media (max-width: 359px) {
  .site-header .site-logo {
    height: 32px;
  }

  .lx-hero__title {
    font-size: 2.1rem;
  }

  .lx-tab {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ==========================================================================
   14. Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lx-panel:not([hidden]) {
    animation: none;
  }

  .lx-issue-card__dot {
    animation: none;
  }

  .lx-slider__badge,
  .lx-slider__handle,
  .lx-slider__annotations {
    transition: none;
  }

  .lx-btn,
  .lx-arrow,
  .lx-tab,
  .lx-tab::before,
  .lx-step,
  .lx-step::before,
  .lx-step::after,
  .lx-step__text,
  .lx-stage__img,
  .lx-stage__seg,
  .lx-flow__link,
  .lx-flow__link::before,
  .lx-flow__link::after {
    transition: none;
  }
}