/*
TemplateMo 621 Luminary
https://templatemo.com/tm-621-luminary
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --base-deep: #0F1115;
  --base-mid: #161A20;
  --base-soft: #1C2128;
  --slate-warm: #6B7280;
  --slate-light: #9CA3AF;
  --graphite: #2A2E35;
  --graphite-soft: #3D424A;
  --ivory: #E5E7EB;
  --ivory-muted: #C9CDD4;
  --silver: #B0B8C4;
  --panel-bg: rgba(22, 26, 32, 0.55);
  --panel-border: rgba(156, 163, 175, 0.08);
  --silk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--base-deep);
  color: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Grain ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.028; mix-blend-mode: overlay;
}

/* ── BG ── */
.atmosphere {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0F1115 0%, #161A20 35%, #1C2128 70%, #0D0F13 100%);
}

/* ── Nav ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 40px;
  transition: background 0.8s var(--silk-ease), padding 0.8s var(--silk-ease);
}
.top-nav.scrolled {
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 16px 40px;
}
.nav-brand { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); text-decoration: none; }
.nav-brand span { font-weight: 300; color: var(--slate-warm); margin-left: 4px; }
.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-warm); text-decoration: none; position: relative; padding: 14px 0 6px;
  transition: color 0.8s var(--silk-ease);
}
.nav-links a::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--silver); border-bottom: 1px solid var(--silver);
  transform: translateX(-50%) rotate(45deg) translateY(-8px);
  opacity: 0; transition: transform 0.8s var(--silk-ease), opacity 0.6s var(--silk-ease);
  pointer-events: none;
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { opacity: 0.7; transform: translateX(-50%) rotate(45deg) translateY(0); }
.nav-links a.active { color: var(--ivory-muted); }
.nav-links a.active::after { opacity: 0.4; transform: translateX(-50%) rotate(45deg) translateY(0); }
.nav-cta {
  padding: 10px 28px; border-radius: 100px; font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--silver), var(--slate-light));
  color: var(--base-deep); border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.nav-cta:hover { transform: scale(1.03); box-shadow: 0 6px 30px rgba(176,184,196,0.15); }

/* ── Hamburger ── */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; padding: 0;
}
.toggle-bar {
  display: block; width: 100%; height: 1.5px; background: var(--ivory);
  position: absolute; left: 0;
  transition: transform 0.6s var(--silk-ease), top 0.6s var(--silk-ease);
}
.toggle-bar:nth-child(1) { top: 6px; }
.toggle-bar:nth-child(2) { top: 16px; }
.nav-toggle.active .toggle-bar:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle.active .toggle-bar:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 550;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--silk-ease), visibility 0.6s var(--silk-ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu-inner {
  position: absolute; inset: 0;
  background: rgba(15, 17, 21, 0.94);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 40px 60px; overflow-y: auto;
}
.mobile-menu-links { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.mobile-menu-link {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 300; letter-spacing: -0.02em;
  color: var(--ivory); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid rgba(156,163,175,0.06); position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.6s var(--silk-ease);
}
.mobile-menu.open .mobile-menu-link {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s var(--silk-ease), transform 0.5s var(--silk-ease), color 0.6s var(--silk-ease);
}
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 0.36s; }
.mobile-menu.open .mobile-menu-link:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu-link::before {
  content: attr(data-index); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; color: var(--slate-warm); opacity: 0.4;
  min-width: 24px; font-variant-numeric: tabular-nums;
}
.mobile-menu-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(156,163,175,0.06);
  opacity: 0; transition: opacity 0.3s ease;
}
.mobile-menu.open .mobile-menu-footer {
  opacity: 1; transition: opacity 0.5s var(--silk-ease) 0.45s;
}
.mobile-menu-footer a {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.4; text-decoration: none;
}
body.menu-open { overflow: hidden; }
body.menu-open .top-nav { background: rgba(15,17,21,0.95); backdrop-filter: blur(20px); }

/* ── Side Panels ── */
.side-panel {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 56px; z-index: 100;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 0;
}
.side-panel.left { left: 20px; }
.side-panel.right { right: 20px; }
.side-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.5;
}
.side-track {
  width: 1px; height: 160px;
  background: rgba(156,163,175,0.06); position: relative; border-radius: 1px;
}
.side-track-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--silver), rgba(176,184,196,0.15));
  border-radius: 1px; transition: height 1.2s var(--silk-ease);
}
.side-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-warm); opacity: 0.15;
  transition: opacity 0.8s var(--silk-ease), transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.side-dot.active {
  opacity: 0.8; background: var(--silver);
  box-shadow: 0 0 12px rgba(176,184,196,0.3); transform: scale(1.3);
}
.side-readout {
  font-size: 9px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--slate-warm); opacity: 0.35;
  font-variant-numeric: tabular-nums;
}

/* ── Container ── */
.main { position: relative; z-index: 10; max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* ── Shared ── */
.section { padding: 120px 0; position: relative; }
.section-tag {
  font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.6; margin-bottom: 20px;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.15; color: var(--ivory); margin-bottom: 20px;
}
.section-title strong { font-weight: 600; }
.section-body {
  font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--slate-light); max-width: 540px;
}
.section-center { text-align: center; }
.section-center .section-body { margin: 0 auto; }

.silk-divider { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, var(--panel-border), transparent); margin: 0 auto; }

.btn-primary {
  display: inline-block; padding: 16px 44px; border-radius: 100px;
  background: linear-gradient(135deg, var(--silver), var(--slate-light));
  color: var(--base-deep); font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer;
  text-decoration: none;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 8px 40px rgba(176,184,196,0.18); }
.btn-secondary {
  display: inline-block; padding: 16px 44px; border-radius: 100px; background: transparent;
  color: var(--ivory-muted); font-family: inherit; font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--panel-border); cursor: pointer; text-decoration: none;
  transition: transform 0.8s var(--silk-ease), border-color 0.8s var(--silk-ease), background 0.8s var(--silk-ease);
}
.btn-secondary:hover { transform: scale(1.02); border-color: rgba(156,163,175,0.2); background: rgba(156,163,175,0.04); }

/* ── Reveal ── */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1.2s var(--silk-ease), transform 1.2s var(--silk-ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 120px 0 80px; position: relative;
}
.hero-grid {
  position: absolute; bottom: 0; left: 50%; height: 80%;
  width: 100vw; transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  --mx: 50%; --my: 50%;
  background-image:
    linear-gradient(to right, rgba(156,163,175,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(156,163,175,0.22) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center bottom;
  -webkit-mask-image:
    radial-gradient(circle 300px at var(--mx) var(--my), rgba(0,0,0,1) 0%, transparent 65%),
    linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.4) 100%);
  mask-image:
    radial-gradient(circle 300px at var(--mx) var(--my), rgba(0,0,0,1) 0%, transparent 65%),
    linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.4) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.hero > *:not(.hero-grid) { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 24px; border-radius: 100px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px); margin-bottom: 40px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.2s var(--silk-ease) 0.2s forwards;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--silver);
  box-shadow: 0 0 8px rgba(176,184,196,0.4); animation: pulse 3s ease-in-out infinite;
}
.hero-badge span { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-light); }

.hero h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 300;
  letter-spacing: -0.05em; line-height: 1;
  opacity: 0; transform: translateY(24px);
  animation: fadeUp 1.4s var(--silk-ease) 0.4s forwards;
}
.hero h1 em {
  font-style: normal; font-weight: 600;
  background: linear-gradient(135deg, var(--ivory), var(--silver), var(--slate-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: clamp(0.85rem, 1.2vw, 1rem); font-weight: 300; line-height: 1.7;
  color: var(--slate-light); max-width: 520px; margin: 28px auto 48px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.6s forwards;
}
.hero-ctas {
  display: flex; gap: 14px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.8s forwards;
}
.hero-metrics {
  display: flex; justify-content: center; gap: 56px; margin-top: 72px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 1s forwards;
}
.metric { text-align: center; }
.metric-value {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -0.04em;
  color: var(--ivory); line-height: 1; font-variant-numeric: tabular-nums;
}
.metric-value span { font-size: 0.5em; font-weight: 400; color: var(--slate-warm); vertical-align: super; margin-left: 2px; }
.metric-label { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-warm); margin-top: 8px; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ══════════════════════════════════
   LOGO TICKER
   ══════════════════════════════════ */
.logo-ticker {
  padding: 60px 0; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
  overflow: hidden; position: relative; z-index: 10;
}
.logo-ticker-label {
  text-align: center; font-size: 9px; font-weight: 500; letter-spacing: 0.25em;
  text-transform: uppercase; opacity: 0.5; margin-bottom: 32px;
}
.ticker-track {
  display: flex; width: max-content;
  animation: tickerScroll 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  flex-shrink: 0; padding: 0 40px; display: flex; align-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.3;
  transition: opacity 0.6s var(--silk-ease);
}
.ticker-item:hover { opacity: 0.7; }
.ticker-dot { width: 4px; height: 4px; border-radius: 50%;  opacity: 0.2; margin: 0 40px; flex-shrink: 0; }

@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ══════════════════════════════════
   FEATURE SHOWCASE
   ══════════════════════════════════ */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 72px 0;
}
.feature.reverse { direction: rtl; }
.feature.reverse > * { direction: ltr; }

.feature-visual {
  position: relative; height: 320px; border-radius: 32px; overflow: hidden;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
}
.feature-visual img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.feature-content {}
.feature-number {
  font-size: 3rem; font-weight: 200; letter-spacing: -0.04em;
  color: rgba(176,184,196,0.08); line-height: 1; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════
   PRICING
   ══════════════════════════════════ */
.pricing-toggle {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin: 40px 0 56px;
}
.pricing-toggle-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-warm); transition: color 0.6s var(--silk-ease);
}
.pricing-toggle-label.active { color: var(--ivory); }
.toggle-switch {
  width: 48px; height: 26px; border-radius: 100px; background: var(--graphite);
  border: 1px solid var(--panel-border); position: relative; cursor: pointer;
  transition: background 0.6s var(--silk-ease);
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--silver); transition: transform 0.6s var(--silk-ease);
}
.toggle-switch.annual::after { transform: translateX(22px); }
.save-badge {
  font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--silver); opacity: 0; transition: opacity 0.4s var(--silk-ease);
}
.save-badge.show { opacity: 1; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pricing-card {
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 36px;
  padding: 44px 36px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.pricing-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(210,215,220,0.02) 0%, transparent 40%);
  pointer-events: none; transition: opacity 0.8s var(--silk-ease); opacity: 0;
}
.pricing-card.featured {
  border-color: rgba(176,184,196,0.15);
  box-shadow: 0 0 60px rgba(176,184,196,0.04);
  padding-top: 60px;
}
.pricing-card.featured::before { opacity: 1; }
.pricing-card.featured .pricing-badge { display: inline-block; }

.pricing-badge {
  display: none; position: absolute; top: 12px; right: 20px;
  font-size: 8px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px;
  background: rgba(176,184,196,0.1); border: 1px solid rgba(176,184,196,0.12);
  color: var(--silver);
}

.pricing-tier {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate-warm); margin-bottom: 24px;
}

.pricing-prices { margin-bottom: 24px; }

.price-option {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(156,163,175,0.05);
  transition: opacity 0.6s var(--silk-ease);
  opacity: 0.35;
}
.price-option.active { opacity: 1; }

.price-option-left { display: flex; align-items: baseline; gap: 3px; }
.price-currency {
  font-size: 0.9rem; font-weight: 300; color: var(--slate-warm);
  transition: color 0.6s var(--silk-ease);
}
.price-amount {
  font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; color: var(--slate-light);
  font-variant-numeric: tabular-nums;
  transition: font-size 0.6s var(--silk-ease), color 0.6s var(--silk-ease);
}
.price-period {
  font-size: 0.75rem; font-weight: 300; color: var(--slate-warm); margin-left: 2px;
  transition: color 0.6s var(--silk-ease);
}
.price-yearly {
  font-size: 0.72rem; font-weight: 400; color: var(--slate-warm);
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--silk-ease);
}

/* Active state — emphasized */
.price-option.active .price-currency { color: var(--slate-light); }
.price-option.active .price-amount { font-size: 2.6rem; color: var(--ivory); }
.price-option.active .price-period { color: var(--slate-light); }
.price-option.active .price-yearly { color: var(--slate-light); }

.price-label {
  font-size: 8px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-warm); margin-bottom: 2px;
  transition: color 0.6s var(--silk-ease);
}
.price-option.active .price-label { color: var(--silver); }

.pricing-desc {
  font-size: 0.85rem; font-weight: 300; line-height: 1.6; color: var(--slate-light);
  margin-bottom: 28px; flex: 1;
}
.pricing-features { list-style: none; margin-bottom: 32px; }
.pricing-features li {
  font-size: 0.82rem; font-weight: 400; color: var(--slate-light);
  padding: 8px 0; border-bottom: 1px solid rgba(156,163,175,0.05);
  display: flex; align-items: center; gap: 10px;
}
.pricing-features li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--silver); opacity: 0.5; flex-shrink: 0;
}
.pricing-card .btn-primary, .pricing-card .btn-secondary { width: 100%; text-align: center; padding: 14px; }

/* ══════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════ */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 56px;
}
.testimonial-card {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 28px; padding: 36px; backdrop-filter: blur(20px);
  transition: transform 0.8s var(--silk-ease);
}
.testimonial-quote {
  font-size: 0.9rem; font-weight: 300; line-height: 1.75; color: var(--slate-light);
  margin-bottom: 24px; font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--graphite); border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--slate-warm);
}
.testimonial-name { font-size: 0.8rem; font-weight: 500; color: var(--ivory); }
.testimonial-role { font-size: 0.72rem; font-weight: 300; color: var(--slate-warm); margin-top: 2px; }
.testimonial-card:nth-child(2) { transform: translateY(24px); }

/* ══════════════════════════════════
   INTEGRATIONS
   ══════════════════════════════════ */
.integrations-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px;
}
.integration-item {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 28px 16px; text-align: center;
  backdrop-filter: blur(16px);
  transition: transform 0.8s var(--silk-ease), border-color 0.8s var(--silk-ease);
}
.integration-icon {
  width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 10px; background: var(--graphite); border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--slate-light);
}
.integration-name {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--slate-light); text-transform: uppercase;
}

/* ══════════════════════════════════
   FAQ
   ══════════════════════════════════ */
.faq-list { max-width: 720px; margin: 48px auto 0; }
.faq-controls {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
}
.faq-toggle-all {
  background: none; border: 1px solid var(--panel-border); border-radius: 100px;
  padding: 8px 20px; font-family: inherit;
  font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-warm); cursor: pointer;
  transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease);
}
.faq-toggle-all:hover { color: var(--ivory); border-color: rgba(156,163,175,0.2); }
.faq-item {
  border-bottom: 1px solid var(--panel-border); overflow: hidden;
}
.faq-question {
  width: 100%; background: none; border: none; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-family: inherit;
  font-size: 0.95rem; font-weight: 400; color: var(--ivory);
  text-align: left;
  transition: color 0.6s var(--silk-ease);
}
.faq-question:hover { color: var(--silver); }
.faq-icon {
  width: 20px; height: 20px; position: relative; flex-shrink: 0; margin-left: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--slate-warm);
  transition: transform 0.6s var(--silk-ease), opacity 0.4s ease;
}
.faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s var(--silk-ease);
}
.faq-answer-inner {
  overflow: hidden;
  padding: 0;
  font-size: 0.88rem; font-weight: 300; line-height: 1.8; color: var(--slate-light);
  transition: padding 0.8s var(--silk-ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer-inner { padding: 0 0 24px; }

/* ══════════════════════════════════
   FOOTER CTA
   ══════════════════════════════════ */
.footer-cta { padding: 120px 0 80px; text-align: center; }
.footer-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 40px; }
.footer-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 40px; border-top: 1px solid rgba(156,163,175,0.06);
}
.footer-brand { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-light); opacity: 0.5; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-light); opacity: 0.5; text-decoration: none;
  transition: opacity 0.6s var(--silk-ease);
}
.footer-links a:hover { opacity: 0.8; }
.footer-credit {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-light); opacity: 0.5;
}
.footer-credit a {
  color: var(--slate-light); text-decoration: none; text-transform: none; letter-spacing: 0.05em;
  transition: opacity 0.6s var(--silk-ease);
}
.footer-credit a:hover { opacity: 0.8; }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width: 1024px) {
  .main { padding: 0 32px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .side-panel { display: none; }
  .feature { grid-template-columns: 1fr; gap: 40px; }
  .feature.reverse { direction: ltr; }
  .feature-visual { height: 260px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin: 48px auto 0; }
  .testimonial-card:nth-child(2) { transform: none; }
  .integrations-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .main { padding: 0 20px; }
  .top-nav { padding: 18px 20px; }
  .top-nav.scrolled { padding: 14px 20px; }
  .hero { min-height: 100svh; padding: 100px 0 60px; }
  .hero-metrics { flex-direction: column; gap: 28px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 280px; text-align: center; }
  .section { padding: 80px 0; }
  .feature-visual { height: 240px; border-radius: 24px; }
  .pricing-card { padding: 32px 24px; border-radius: 28px; }
  .pricing-card.featured { padding-top: 52px; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bar { flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-ctas { flex-direction: column; align-items: center; }
  .mobile-menu-inner { padding: 90px 20px 40px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 2.4rem; }
  .section-title { font-size: 1.7rem; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .mobile-menu-link { font-size: 1.4rem; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px 0 40px; }
  .hero-metrics { flex-direction: row; gap: 36px; margin-top: 40px; }
  .section { padding: 60px 0; }
  .mobile-menu-inner { padding: 64px 32px 24px; justify-content: flex-start; }
  .mobile-menu-link { font-size: 1.2rem; padding: 8px 0; }
}

@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover { transform: scale(1.01); box-shadow: 0 12px 60px rgba(0,0,0,0.15); }
  .pricing-card:hover::before { opacity: 1; }
  .testimonial-card:hover { transform: scale(1.01); }
  .testimonial-card:nth-child(2):hover { transform: translateY(24px) scale(1.01); }
  .integration-item:hover { transform: scale(1.04); border-color: rgba(156,163,175,0.15); }
}
@media (hover: none) {
  .pricing-card:hover, .testimonial-card:hover, .integration-item:hover { transform: none; }
}

/* Focus */
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.nav-links a:focus-visible, .nav-toggle:focus-visible,
.mobile-menu-link:focus-visible, .faq-question:focus-visible,
.toggle-switch:focus-visible, .faq-toggle-all:focus-visible {
  outline: 2px solid var(--silver); outline-offset: 3px;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.nav-brand img {
  width: auto;
  height: 36px;
  display: block;
}
.nav-brand img {
  animation: logoStartup 1.2s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes logoStartup {
  0% {
    opacity: 0;
    transform: translateX(-25px);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translateX(0);
  }
}
.feature-visual {
  border-radius: 0;
}

.feature-visual img {
  border-radius: 0;
}

.feature-visual {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.feature-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;

  /* Pull the images into the dark Metcode OT theme */
  filter:
    brightness(0.78)
    contrast(1.08)
    saturate(0.80);

  transition:
    filter 0.6s ease,
    transform 0.8s cubic-bezier(.2,.8,.2,1);
}

/* Dark atmospheric edge fade */
.feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      to right,
      rgba(5, 8, 12, 0.65) 0%,
      transparent 22%,
      transparent 75%,
      rgba(5, 8, 12, 0.70) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(5, 8, 12, 0.35) 0%,
      transparent 25%,
      transparent 65%,
      rgba(5, 8, 12, 0.85) 100%
    );
}

/* Bring the image slightly alive on hover */
.feature:hover .feature-visual img {
  filter:
    brightness(0.92)
    contrast(1.08)
    saturate(0.95);

  transform: scale(1.025);
}

.feature-content .btn-secondary {
  margin-top: 24px;
}

/* =====================================================
   HERO BACKGROUND VIDEO
===================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

/* Full hero background video */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 0;

  /* Make footage fit the dark Metcode OT theme */
  filter:
    brightness(0.48)
    contrast(1.12)
    saturate(0.75);
}


/* Dark cinematic overlay */
.hero-video-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(35, 100, 140, 0.12),
      transparent 45%
    ),
    linear-gradient(
      90deg,
      rgba(4, 6, 9, 0.88) 0%,
      rgba(4, 6, 9, 0.62) 48%,
      rgba(4, 6, 9, 0.38) 100%
    );

  z-index: 1;

  pointer-events: none;
}


/* Existing futuristic grid stays visible over video */
.hero-grid {
  z-index: 2;
}


/* Put all hero content above video */
.hero-badge,
.hero h1,
.hero-sub,
.hero-ctas,
.hero-metrics {
  position: relative;
  z-index: 3;
}
.hero-video {
  animation: heroVideoZoom 18s ease-in-out infinite alternate;
}

@keyframes heroVideoZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.integration-icon {
  width: 72px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;
}

.integration-icon img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
}

.integration-item:hover .integration-icon img {
  transform: scale(1.08);
}
.integration-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter: grayscale(1) brightness(2);
  opacity: 0.72;

  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.integration-item:hover .integration-icon img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
  transform: scale(1.08);
}
/* =====================================================
   QUOTE / PROPOSAL PAGE WIDTH
===================================================== */

.request-hero,
.request-layout {
  width: 100%;
  max-width: 1800px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}


/* HERO */
.request-hero {
  padding: 155px 0 80px !important;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}


/* FORM AREA */
.request-layout {
  padding: 40px 0 120px !important;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 60px;
}


/* FORM */
.request-form-shell {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}


/* SIDEBAR */
.request-sidebar {
  width: 100%;
  max-width: 420px;
}


/* TABLET */
@media (max-width: 1000px) {

  .request-hero,
  .request-layout {
    width: 90%;
    grid-template-columns: 1fr;
  }

  .request-sidebar {
    max-width: none;
  }

}


/* MOBILE */
@media (max-width: 700px) {

  .request-hero,
  .request-layout {
    width: 92%;
  }

}

/* ==========================================
   PROJECT / SUPPORT TOGGLE
========================================== */

.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;

  cursor: pointer;
  flex-shrink: 0;

  background: rgba(255, 255, 255, 0.05);

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}


/* Moving circle */
.toggle-switch::after {
  content: "";

  position: absolute;

  width: 20px;
  height: 20px;

  top: 3px;
  left: 4px;

  border-radius: 50%;

  background: #fff;

  transition:
    transform 0.3s cubic-bezier(.4, 0, .2, 1),
    background 0.3s ease;
}


/* SUPPORT STATE */
.toggle-switch.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.65);
}


/* Move circle to right */
.toggle-switch.active::after {
  transform: translateX(23px);
}


/* Labels */
.pricing-toggle-label {
  opacity: 0.4;

  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}

.pricing-toggle-label.active {
  opacity: 1;
}


/* ==========================================
   COMPACT INDUSTRIES
========================================== */

.industries-mini {
  padding-top: 70px;
  padding-bottom: 70px;
}


/* Header */

.industries-mini-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 32px;
}

.industries-mini-header .section-title {
  margin-bottom: 0;
  max-width: 750px;
}


/* View all */

.industries-view-all {
  flex-shrink: 0;

  color: inherit;
  text-decoration: none;

  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  opacity: 0.65;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.industries-view-all:hover {
  opacity: 1;
  transform: translateX(4px);
}


/* Three columns */

.industries-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}


/* Individual industry */

.industry-mini {
  position: relative;

  display: grid;
  grid-template-columns: 32px 1fr auto;

  gap: 18px;

  align-items: start;

  padding: 27px 28px;

  color: inherit;
  text-decoration: none;

  border-right: 1px solid rgba(255,255,255,0.14);

  transition:
    background 0.3s ease,
    padding-left 0.3s ease;
}

.industry-mini:last-child {
  border-right: 0;
}

.industry-mini:hover {
  background: rgba(255,255,255,0.035);
}


/* Number */

.industry-mini-number {
  font-size: 0.65rem;
  letter-spacing: 0.1em;

  opacity: 0.4;

  padding-top: 5px;
}


/* Content */

.industry-mini h3 {
  margin: 0 0 9px;

  font-size: 1rem;
  font-weight: 500;
}

.industry-mini p {
  margin: 0;

  max-width: 300px;

  font-size: 0.78rem;
  line-height: 1.6;

  opacity: 0.6;
}


/* Arrow */

.industry-mini-arrow {
  font-size: 1.1rem;

  opacity: 0.35;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.industry-mini:hover .industry-mini-arrow {
  opacity: 1;
  transform: translateX(5px);
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {

  .industries-mini-grid {
    grid-template-columns: 1fr;
  }

  .industry-mini {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }

  .industry-mini:last-child {
    border-bottom: 0;
  }

}


@media (max-width: 650px) {

  .industries-mini {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .industries-mini-header {
    display: block;
  }

  .industries-view-all {
    display: inline-block;
    margin-top: 20px;
  }

}/* =====================================================
   OT PLATFORM LOGO MARQUEE
===================================================== */

.integrations-section {
  overflow: hidden;
}


/* ==========================================
   MARQUEE WINDOW
========================================== */

.integration-marquee {
  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);

  margin-top: 55px;

  overflow: hidden;

  padding: 30px 0;

  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}


/* Fade logos at edges */

.integration-marquee::before,
.integration-marquee::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  width: 12vw;

  z-index: 3;

  pointer-events: none;
}


.integration-marquee::before {
  left: 0;

  background:
    linear-gradient(
      to right,
      var(--bg, #050505),
      transparent
    );
}


.integration-marquee::after {
  right: 0;

  background:
    linear-gradient(
      to left,
      var(--bg, #050505),
      transparent
    );
}


/* ==========================================
   MOVING TRACK
========================================== */

.integration-track {
  display: flex;

  align-items: center;

  width: max-content;

  animation:
    integrationScroll 45s linear infinite;

  will-change: transform;
}


/* ==========================================
   LOGO CONTAINERS
========================================== */

.integration-logo {
  width: 220px;
  height: 105px;

  flex: 0 0 220px;

  margin: 0 22px;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0.62;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* BIGGER LOGOS */

.integration-logo img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 190px;
  max-height: 90px;

  object-fit: contain;

  object-position: center;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}


/* Hover */

.integration-logo:hover {
  opacity: 1;
}


.integration-logo:hover img {
  transform: scale(1.08);
}


/* ==========================================
   CONTINUOUS MOVEMENT
========================================== */

@keyframes integrationScroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* Pause movement when hovering */

.integration-marquee:hover .integration-track {
  animation-play-state: paused;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

  .integration-marquee {
    margin-top: 35px;
    padding: 22px 0;
  }


  .integration-logo {
    width: 160px;
    height: 80px;

    flex-basis: 160px;

    margin: 0 14px;
  }


  .integration-logo img {
    max-width: 145px;
    max-height: 68px;
  }


  .integration-track {
    animation-duration: 35s;
  }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .integration-track {
    animation: none;
  }

}
#integrations .section-title {
  text-align: center;
}






/* =====================================================
   HORIZONTAL 3-COLUMN DROPDOWN
===================================================== */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-arrow {
  font-size: 0.6rem;
  opacity: 0.4;
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-arrow {
  transform: rotate(180deg);
}


/* DROPDOWN */

.nav-dropdown-menu {
  position: absolute;

  top: calc(100% + 18px);
  left: 50%;

  width: 620px;

  padding: 18px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 4px;

  background: transparent;

  border: transparent;
  border-top: 0.1px solid rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow: none;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate(-50%, 8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;

  z-index: 1500;
}


/* HOVER BRIDGE */

.nav-dropdown-menu::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -19px;
  height: 19px;
}


/* SHOW */

.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translate(-50%, 0);
}


/* =====================================================
   ITEMS
===================================================== */

.nav-dropdown-menu > a {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 46px;

  padding: 10px 14px;

  color: inherit;
  text-decoration: none;

  font-size: 0.66rem;
  line-height: 1.35;

  opacity: 0.6;

  border: 1px solid transparent;

  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.nav-dropdown-menu > a:hover {
  opacity: 10;

  

  
}


/* SMALL LINE */

.nav-dropdown-menu > a::before {
  content: "";

  width: 10px;
  height: 1px;

  margin-right: 9px;

  background: currentColor;

  opacity: 0.3;

  transition: width 0.2s ease;
}

.nav-dropdown-menu > a:hover::before {
  width: 17px;
  opacity: 0.8;
}


/* Remove previous featured-item styling */

.nav-drop-featured {
  display: flex !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.nav-drop-number,
.nav-drop-arrow,
.nav-drop-featured small {
  display: none;
}

.nav-drop-featured strong {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Dropdown text - regular weight */
.nav-dropdown-menu,
.nav-dropdown-menu a,
.nav-dropdown-menu strong,
.nav-dropdown-menu small {
  font-weight: 400 !important;
}


/* Dropdown at top of page */
.nav-dropdown-menu {
  background: transparent;

  
}

/* Dropdown after scrolling */
.top-nav.scrolled .nav-dropdown-menu {
  background: #07090c;
  opacity: 0.9;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-socials a {
  width: 36px;
  height: 36px;






  opacity: 0.55;

  transition: opacity 0.25s ease,
              border-color 0.25s ease,
              transform 0.25s ease;
}

.footer-socials svg {
  width: 15px;
  height: 15px;

  fill: currentColor;
}

.footer-socials a:hover {
  opacity: 1;

  border-color: rgba(255, 255, 255, 0.4);

  transform: translateY(-2px);
}


.futuristic-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.futuristic-logo img {
  width: 150px;
  height: auto;
  display: block;

  animation: logo-reveal 0.8s cubic-bezier(.16, 1, .3, 1) both;
}


/* Clean reveal on page load */
@keyframes logo-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}


/* Scan line */
.futuristic-logo::after {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  left: -30%;

  width: 20%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );

  transform: skewX(-15deg);
  opacity: 0;
}


/* Scan once on hover */
.futuristic-logo:hover::after {
  animation: logo-scan 0.65s ease-out;
}


@keyframes logo-scan {
  0% {
    left: -30%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .futuristic-logo img,
  .futuristic-logo:hover::after {
    animation: none;
  }
}


/* =====================================================
   MOBILE SUBMENUS
===================================================== */

.mobile-nav-group {
  width: 100%;
}


/* BUTTON MUST MATCH NORMAL MOBILE LINKS */

.mobile-submenu-toggle {
  width: 100%;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);

  background: transparent;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;

  display: flex;
  align-items: center;
}


/* PLUS */

.mobile-submenu-icon {
  margin-left: auto;

  font-size: 1.1rem;
  font-weight: 300;

  opacity: 0.4;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


.mobile-nav-group.active .mobile-submenu-icon {
  transform: rotate(45deg);
  opacity: 1;
}


/* =====================================================
   SUBMENU
===================================================== */

.mobile-submenu {
  max-height: 0;
  overflow: hidden;

  opacity: 0;

  padding-left: 54px;

  transition:
    max-height 0.4s cubic-bezier(.16,1,.3,1),
    opacity 0.3s ease,
    padding-bottom 0.3s ease;
}


.mobile-nav-group.active .mobile-submenu {
  opacity: 1;
  padding-bottom: 18px;
}


/* SUBMENU LINKS */

.mobile-submenu a {
  display: block;

  padding: 10px 0;

  color: inherit;
  text-decoration: none;

  font-size: 0.72rem;
  font-weight: 400;

  opacity: 0.5;

  border-bottom: 1px solid rgba(255,255,255,0.06);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


.mobile-submenu a:last-child {
  border-bottom: 0;
}


.mobile-submenu a:hover {
  opacity: 1;
  transform: translateX(5px);
}


/* SMALL TECHNICAL MARK */

.mobile-submenu a::before {
  content: "";

  display: inline-block;

  width: 8px;
  height: 1px;

  margin-right: 10px;

  vertical-align: middle;

  background: currentColor;

  opacity: 0.3;
}


@media (max-width: 600px) {

  .mobile-submenu {
    padding-left: 43px;
  }

  .mobile-submenu a {
    font-size: 0.68rem;
  }

}

.mobile-submenu-toggle {
  position: relative;

  width: 100%;
  min-height: 58px;

  padding: 10px 0 10px 54px;

  display: flex;
  align-items: center;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);

  background: transparent;

  color: inherit;

  font-family: inherit;
  font-size: clamp(1.3rem, 4vw, 2.1rem);
  font-weight: 400;

  text-align: left;

  cursor: pointer;
}


/* Number */
.mobile-submenu-toggle::before {
  content: attr(data-index);

  position: absolute;

  left: 0;

  font-size: 0.62rem;

  letter-spacing: 0.1em;

  opacity: 0.28;
}


/* + icon */
.mobile-submenu-icon {
  margin-left: auto;

  font-size: 1.1rem;
  font-weight: 300;

  opacity: 0.4;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


.mobile-nav-group.active .mobile-submenu-icon {
  transform: rotate(45deg);
  opacity: 1;
}

/* =====================================================
   PROCESS FLOW
===================================================== */

.process-section {
  overflow: hidden;
}


/* FLOW */

.process-flow {
  margin-top: 70px;

  display: grid;

  grid-template-columns:
    1fr
    90px
    1fr
    90px
    1fr;

  align-items: start;

  max-width: 1200px;

  margin-left: auto;
  margin-right: auto;
}


/* =====================================================
   PROCESS NODE
===================================================== */

.process-node {
  text-align: center;

  position: relative;
}


/* CIRCLE */

.process-circle {
  width: 96px;
  height: 96px;

  margin: 0 auto 30px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.22);

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  background:
    rgba(255,255,255,0.02);

  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}


.process-circle span {
  font-size: 0.72rem;

  letter-spacing: 0.13em;

  opacity: 0.6;
}


/* inner ring */

.process-circle::before {
  content: "";

  position: absolute;

  inset: 8px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.08);
}


/* FEATURED MIDDLE */

.process-circle-active {
  border-color:
    rgba(255,255,255,0.65);

  background:
    rgba(255,255,255,0.05);
}


.process-circle-active::after {
  content: "";

  position: absolute;

  inset: -7px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.08);
}


/* hover */

.process-node:hover .process-circle {
  transform: scale(1.05);

  border-color:
    rgba(255,255,255,0.7);

  background:
    rgba(255,255,255,0.04);
}


/* =====================================================
   CONNECTORS
===================================================== */

.process-connector {
  position: relative;

  height: 96px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* line */

.process-connector::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 1px;

  background:
    rgba(255,255,255,0.16);
}


/* animated signal */

.process-connector::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 28px;
  height: 1px;

  background:
    rgba(255,255,255,0.8);

  animation:
    processSignal
    2.8s linear
    infinite;
}


@keyframes processSignal {

  0% {
    left: 0;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 28px);
    opacity: 0;
  }

}


/* Arrow */

.process-arrow {
  position: relative;

  z-index: 2;

  padding: 0 8px;

  background: #07090c;

  font-size: 1rem;

  opacity: 0.5;
}


/* =====================================================
   COPY
===================================================== */

.process-copy {
  max-width: 300px;

  margin: 0 auto;
}


.process-kicker {
  display: block;

  margin-bottom: 10px;

  font-size: 0.61rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  opacity: 0.4;
}


.process-copy h3 {
  margin:
    0 0
    15px;

  font-size:
    clamp(1.5rem, 2vw, 2rem);

  font-weight: 400;

  letter-spacing: -0.03em;
}


.process-copy p {
  margin: 0;

  font-size: 0.76rem;

  line-height: 1.75;

  opacity: 0.58;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

  .process-flow {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    max-width: 520px;

    margin-top: 55px;
  }


  .process-node {
    display: grid;

    grid-template-columns:
      90px
      1fr;

    gap: 25px;

    align-items: start;

    text-align: left;
  }


  .process-circle {
    width: 76px;
    height: 76px;

    margin: 0;
  }


  .process-copy {
    max-width: none;

    margin: 0;
  }


  .process-connector {
    width: 76px;
    height: 75px;

    margin-left: 0;
  }


  .process-connector::before {
    top: 0;
    bottom: 0;

    left: 50%;

    right: auto;

    width: 1px;
    height: 100%;

    background:
      rgba(255,255,255,0.16);
  }


  .process-connector::after {
    top: 0;
    left: 50%;

    width: 1px;
    height: 22px;

    animation:
      processSignalVertical
      2.5s linear
      infinite;
  }


  .process-arrow {
    display: none;
  }


  @keyframes processSignalVertical {

    0% {
      top: 0;
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      top: calc(100% - 22px);
      opacity: 0;
    }

  }

}
/* =====================================================
   ENGINEERING CONTACT
===================================================== */

.contact-section {
  text-align: left;
}


/* MAIN LAYOUT */

.contact-layout {
  display: grid;

  grid-template-columns:
    0.78fr
    1.22fr;

  gap: 85px;

  align-items: start;
}


/* =====================================================
   LEFT INTRO
===================================================== */

.contact-intro {
  position: sticky;

  top: 130px;
}


.contact-intro .section-title {
  max-width: 560px;
}


.contact-intro .section-body {
  max-width: 520px;

  margin: 25px 0 0;
}


/* =====================================================
   PROCESS STEPS
===================================================== */

.contact-steps {
  margin-top: 50px;

  border-top:
    1px solid rgba(255,255,255,0.12);
}


.contact-step {
  display: grid;

  grid-template-columns:
    45px
    1fr;

  gap: 17px;

  padding: 20px 0;

  border-bottom:
    1px solid rgba(255,255,255,0.1);
}


.contact-step-number {
  font-size: 0.62rem;

  letter-spacing: 0.12em;

  opacity: 0.35;

  padding-top: 3px;
}


.contact-step strong {
  display: block;

  margin-bottom: 6px;

  font-size: 0.76rem;

  font-weight: 400;
}


.contact-step p {
  max-width: 390px;

  margin: 0;

  font-size: 0.7rem;

  line-height: 1.65;

  opacity: 0.48;
}


/* DIRECT CONTACT */

.contact-direct {
  margin-top: 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  font-size: 0.67rem;
}


.contact-direct span {
  opacity: 0.4;
}


.contact-direct a {
  color: inherit;

  text-decoration: none;

  opacity: 0.75;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


.contact-direct a:hover {
  opacity: 1;

  transform: translateX(4px);
}


/* =====================================================
   FORM PANEL
===================================================== */

.contact-form-panel {
  

  padding: 38px;
}


/* HEADER */

.contact-form-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;

  padding-bottom: 28px;

  border-bottom:
    1px solid rgba(255,255,255,0.12);
}


.contact-form-index {
  display: block;

  margin-bottom: 8px;

  font-size: 0.58rem;

  letter-spacing: 0.12em;

  opacity: 0.35;
}


.contact-form-header h3 {
  margin: 0;

  font-size: 1.3rem;

  font-weight: 400;
}


/* STATUS */

.contact-form-status {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  opacity: 0.55;
}


.contact-form-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;

  box-shadow:
    0 0 8px rgba(255,255,255,0.45);
}


/* =====================================================
   FORM SECTIONS
===================================================== */

.contact-form-section {
  padding: 32px 0;

  border-bottom:
    1px solid rgba(255,255,255,0.1);
}


.contact-form-section-title {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 22px;

  font-size: 0.64rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  opacity: 0.5;
}


.contact-form-section-title span {
  opacity: 0.5;
}


/* =====================================================
   FIELDS
===================================================== */

.contact-fields {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}


.contact-field label {
  display: block;

  margin-bottom: 8px;

  font-size: 0.62rem;

  letter-spacing: 0.07em;

  opacity: 0.55;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 15px 16px;

  background:
    rgba(255,255,255,0.012);

  border:
    1px solid rgba(255,255,255,0.15);

  color: inherit;

  font: inherit;

  outline: none;

  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color:
    rgba(255,255,255,0.45);

  background:
    rgba(255,255,255,0.025);
}


.contact-field textarea {
  resize: vertical;

  min-height: 150px;

  line-height: 1.7;
}


.contact-field select option {
  color: #111;
}


.contact-field-full {
  width: 100%;
}


/* PLACEHOLDER */

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: inherit;

  opacity: 0.28;
}


/* =====================================================
   SUBMIT
===================================================== */

.contact-submit {
  padding-top: 30px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 35px;
}


.contact-submit p {
  max-width: 390px;

  margin: 0;

  font-size: 0.64rem;

  line-height: 1.6;

  opacity: 0.38;
}


.contact-submit .btn-primary {
  flex-shrink: 0;

  border: 0;

  cursor: pointer;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

  .contact-layout {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .contact-intro {
    position: static;
  }

}


@media (max-width: 650px) {

  .contact-form-panel {
    padding: 25px;
  }


  .contact-fields {
    grid-template-columns: 1fr;
  }


  .contact-submit {
    flex-direction: column;

    align-items: stretch;
  }


  .contact-submit .btn-primary {
    width: 100%;
  }


  .contact-direct {
    flex-direction: column;

    align-items: flex-start;
  }

}

/* =====================================================
   CONTACT INFORMATION
===================================================== */

.contact-info-grid {
  max-width: 1200px;

  margin:
    55px auto
    75px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  
}


.contact-info-item {
  min-width: 0;

  padding: 28px 30px;

  color: inherit;
  text-decoration: none;

  border-right: 1px solid rgba(255,255,255,0.14);

  transition:
    background 0.25s ease,
    padding-left 0.25s ease;
}


.contact-info-item:last-child {
  border-right: 0;
}


/* LABEL */

.contact-info-label {
  display: block;

  margin-bottom: 14px;

  font-size: 0.6rem;
  font-weight: 400;

  text-transform: uppercase;
  letter-spacing: 0.12em;

  opacity: 0.38;
}


/* CONTENT */

.contact-info-content {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.contact-info-value {
  font-size: 0.82rem;
  font-weight: 400;

  overflow-wrap: anywhere;
}


.contact-info-arrow {
  font-size: 0.8rem;

  opacity: 0.35;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


/* HOVER */

a.contact-info-item:hover {
  background: rgba(255,255,255,0.025);
}


a.contact-info-item:hover .contact-info-arrow {
  opacity: 1;

  transform: translate(3px, -3px);
}


/* MOBILE */

@media (max-width: 800px) {

  .contact-info-grid {
    grid-template-columns: 1fr;
  }


  .contact-info-item {
    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,0.14);
  }


  .contact-info-item:last-child {
    border-bottom: 0;
  }

}
/* =====================================================
   SOLUTION PAGE ANIMATIONS
===================================================== */


/* Scope / Outcomes entrance */

.solution-animate {
  opacity: 0;
  transform: translateY(35px);

  transition:
    opacity 0.8s cubic-bezier(.16, 1, .3, 1),
    transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

.solution-animate-left {
  transform: translate(-30px, 25px);
}

.solution-animate-right {
  transform: translate(30px, 25px);
}

.solution-animate.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}


/* =====================================================
   LIST ITEMS
===================================================== */

.solution-list-animate li {
  opacity: 0;
  transform: translateX(-12px);

  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.solution-animate.is-visible
.solution-list-animate li {
  opacity: 1;
  transform: translateX(0);
}


/* stagger */

.solution-animate.is-visible
.solution-list-animate li:nth-child(1) {
  transition-delay: 0.15s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(2) {
  transition-delay: 0.20s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(3) {
  transition-delay: 0.25s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(4) {
  transition-delay: 0.30s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(5) {
  transition-delay: 0.35s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(6) {
  transition-delay: 0.40s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(7) {
  transition-delay: 0.45s;
}

.solution-animate.is-visible
.solution-list-animate li:nth-child(8) {
  transition-delay: 0.50s;
}


/* =====================================================
   APPLICATION CARDS
===================================================== */

.solution-app-animate {
  transition:
    opacity 0.7s ease,
    transform 0.45s cubic-bezier(.16, 1, .3, 1),
    background 0.3s ease;
}


/* stagger existing reveal */

.solution-app-grid
.solution-app:nth-child(1) {
  transition-delay: 0.05s;
}

.solution-app-grid
.solution-app:nth-child(2) {
  transition-delay: 0.10s;
}

.solution-app-grid
.solution-app:nth-child(3) {
  transition-delay: 0.15s;
}

.solution-app-grid
.solution-app:nth-child(4) {
  transition-delay: 0.20s;
}

.solution-app-grid
.solution-app:nth-child(5) {
  transition-delay: 0.25s;
}

.solution-app-grid
.solution-app:nth-child(6) {
  transition-delay: 0.30s;
}


/* hover */

.solution-app-animate:hover {
  transform: translateY(-6px);
}


/* animate number slightly */

.solution-app-animate .feature-number {
  transition:
    transform 0.35s cubic-bezier(.16, 1, .3, 1),
    opacity 0.35s ease;
}

.solution-app-animate:hover .feature-number {
  transform: translateX(5px);
  opacity: 1;
}


/* =====================================================
   DELIVERY PROCESS
===================================================== */

.process-animate {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(.16, 1, .3, 1);
}


.solution-process.is-visible
.process-animate {
  opacity: 1;
  transform: translateY(0);
}


.solution-process.is-visible
.process-animate:nth-child(1) {
  transition-delay: 0.10s;
}

.solution-process.is-visible
.process-animate:nth-child(2) {
  transition-delay: 0.20s;
}

.solution-process.is-visible
.process-animate:nth-child(3) {
  transition-delay: 0.30s;
}

.solution-process.is-visible
.process-animate:nth-child(4) {
  transition-delay: 0.40s;
}


/* process hover */

.process-animate {
  position: relative;
}

.process-animate:hover {
  transform: translateY(-5px);
}

.process-animate .feature-number {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.process-animate:hover .feature-number {
  transform: translateX(4px);
  opacity: 1;
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .solution-animate,
  .solution-list-animate li,
  .solution-app-animate,
  .process-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

}
/* =====================================================
   METCODE OT - WIDER NAV DROPDOWNS
===================================================== */

.nav-dropdown-menu {
  width: 1200px;
  min-width: 420px;
}

.nav-dropdown-menu > a {
  padding-left: 28px;
  padding-right: 28px;
}

.nav-dropdown-menu .nav-drop-featured {
  padding-left: 28px;
  padding-right: 28px;
}







/* HOVER */

.nav-dropdown-menu .nav-drop-item:hover strong {
  color: #ffffff;
}

.nav-dropdown-menu .nav-drop-item:hover small {
  color: rgba(255, 255, 255, 0.60);
}

.nav-dropdown-menu .nav-drop-item strong {
  display: block;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;

  color: rgba(255, 255, 255, 0.88);

  transition: color 0.25s ease;
}
.nav-dropdown-menu .nav-drop-item small,
.nav-dropdown-menu .nav-drop-featured small {
  display: block;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;

  letter-spacing: 0.09em;
  text-transform: lowercase;

  color: rgba(255, 255, 255, 0.38);

  transition: color 0.25s ease;
}
/* =====================================================
   METCODE OT
   GLOBAL DROPDOWN ICON SYSTEM - CSS ONLY
===================================================== */


/* -----------------------------------------------------
   BASE DROPDOWN ITEM
----------------------------------------------------- */

.nav-dropdown-menu .nav-drop-item {
  position: relative;

  padding-left: 66px;
  min-height: 58px;

  display: flex;
  align-items: center;
}




/* -----------------------------------------------------
   DESCRIPTOR
----------------------------------------------------- */

.nav-dropdown-menu .nav-drop-item small,
.nav-dropdown-menu .nav-drop-featured small {
  text-transform: lowercase;
  letter-spacing: 0.04em;
}






/* TEXT MOVEMENT ON HOVER */

.nav-dropdown-menu .nav-drop-item > span {
  transition: transform 0.25s ease;
}

.nav-dropdown-menu .nav-drop-item:hover > span {
  transform: translateX(2px);
}


/* TITLE */

.nav-dropdown-menu .nav-drop-item strong {
  display: block;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;

  color: rgba(255, 255, 255, 0.86);

  transition: color 0.25s ease;
}

.nav-dropdown-menu .nav-drop-item:hover strong {
  color: #ffffff;
}


/* DESCRIPTOR */

.nav-dropdown-menu .nav-drop-item small {
  display: block;

  margin-top: 4px;

  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;

  letter-spacing: 0.035em;
  text-transform: lowercase;

  color: rgba(255, 255, 255, 0.36);

  transition: color 0.25s ease;
}

.nav-dropdown-menu .nav-drop-item:hover small {
  color: rgba(255, 255, 255, 0.58);
}


/* =====================================================
   SUBTLE LEFT STATUS LINE
===================================================== */

.nav-dropdown-menu .nav-drop-item {
  border-left: 1px solid transparent;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.nav-dropdown-menu .nav-drop-item:hover {
  background: rgba(255, 255, 255, 0.025);

  border-left-color: rgba(255, 255, 255, 0.28);
}


/* =====================================================
   FEATURED ITEM ICON/NUMBER STYLING
===================================================== */

.nav-drop-featured .nav-drop-number {
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 32px;


  

  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;





  transition:
    color 0.25s ease,

 
}




/* FEATURED ARROW */

.nav-drop-featured .nav-drop-arrow {
  opacity: 0.45;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.nav-drop-featured:hover .nav-drop-arrow {
  opacity: 1;

  transform: translate(2px, -2px);
}


/* =====================================================
   OPTIONAL SEPARATION BETWEEN ITEMS
===================================================== */

.nav-dropdown-menu .nav-drop-item + .nav-drop-item {
  border-top: none;
}


/* =====================================================
   KEEP ICONS CLEAN ON SMALLER DESKTOPS
===================================================== */

@media (max-width: 1200px) {

  .nav-dropdown-menu .nav-drop-item {
    padding-left: 64px;
  }

  .nav-dropdown-menu .nav-drop-item::before {
    left: 22px;

    width: 28px;
    height: 28px;

    background-size: 14px 14px;
  }

}

/* =====================================================
   WHERE WE WORK - ANIMATION
===================================================== */

.section-center {
  overflow: hidden;
}


/* INITIAL STATE */

.section-center .section-tag,
.section-center .section-title,
.section-center .integration-item {
  opacity: 0;
  transform: translateY(22px);
}


/* SECTION TAG */

.section-center .section-tag.reveal {
  animation: whereWorkFadeUp 0.65s ease forwards;
}


/* TITLE */

.section-center .section-title.reveal {
  animation: whereWorkFadeUp 0.75s ease 0.12s forwards;
}


/* GRID ITEMS */

.section-center .integrations-grid.reveal .integration-item {
  position: relative;
  overflow: hidden;

  animation: whereWorkFadeUp 0.65s ease forwards;
}


/* STAGGER */

.section-center .integrations-grid.reveal .integration-item:nth-child(1) {
  animation-delay: 0.25s;
}

.section-center .integrations-grid.reveal .integration-item:nth-child(2) {
  animation-delay: 0.34s;
}

.section-center .integrations-grid.reveal .integration-item:nth-child(3) {
  animation-delay: 0.43s;
}

.section-center .integrations-grid.reveal .integration-item:nth-child(4) {
  animation-delay: 0.52s;
}

.section-center .integrations-grid.reveal .integration-item:nth-child(5) {
  animation-delay: 0.61s;
}

.section-center .integrations-grid.reveal .integration-item:nth-child(6) {
  animation-delay: 0.70s;
}


/* MAIN REVEAL */

@keyframes whereWorkFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   INDUSTRIAL HOVER EFFECT
===================================================== */

.section-center .integration-item {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}


/* SCAN LINE */

.section-center .integration-item::after {
  content: "";

  position: absolute;
  left: -100%;
  top: 0;

  width: 55%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 79, 97, 0.18),
    transparent
  );

  transform: skewX(-18deg);

  transition: left 0.6s ease;
}


/* HOVER */

.section-center .integration-item:hover {
  transform: translateY(-5px);

  border-color: rgba(34, 79, 97, 0.55);

  background-color: rgba(34, 79, 97, 0.06);
}

.section-center .integration-item:hover::after {
  left: 140%;
}


/* TEXT */

.section-center .integration-name {
  position: relative;
  z-index: 2;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.section-center .integration-item:hover .integration-name {
  transform: translateX(4px);
  color: #224F61;
}


/* =====================================================
   OPTIONAL SUBTLE PULSE
===================================================== */

.section-center .integration-item::before {
  content: "";

  position: absolute;
  top: 12px;
  right: 12px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #224F61;

  opacity: 0.3;

  transition:
    opacity 0.3s ease,
    box-shadow 0.3s ease;
}

.section-center .integration-item:hover::before {
  opacity: 1;

  box-shadow:
    0 0 0 4px rgba(34, 79, 97, 0.08),
    0 0 12px rgba(34, 79, 97, 0.45);
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .section-center .section-tag,
  .section-center .section-title,
  .section-center .integration-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .section-center .integration-item,
  .section-center .integration-name,
  .section-center .integration-item::after {
    transition: none;
  }
}

/* =====================================================
   OT CAPABILITIES - SEQUENCED ANIMATION
===================================================== */


/* -----------------------------------------------------
   SECTION INTRO
----------------------------------------------------- */

.section-center .section-tag {
  opacity: 0;
  transform: translateY(16px);

  animation: otIntroReveal 0.6s ease forwards;
}

.section-center .section-title {
  opacity: 0;
  transform: translateY(22px);

  animation: otIntroReveal 0.7s ease 0.12s forwards;
}


@keyframes otIntroReveal {

  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =====================================================
   CAPABILITY CARDS
===================================================== */

.section-center .page-card {
  position: relative;
  overflow: hidden;

  opacity: 0;

  transform:
    translateY(28px)
    scale(0.98);

  animation: otCardReveal 0.7s cubic-bezier(.22, .61, .36, 1) forwards;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* SEQUENTIAL STARTUP */

.section-center .page-card:nth-child(1) {
  animation-delay: 0.25s;
}

.section-center .page-card:nth-child(2) {
  animation-delay: 0.35s;
}

.section-center .page-card:nth-child(3) {
  animation-delay: 0.45s;
}

.section-center .page-card:nth-child(4) {
  animation-delay: 0.55s;
}

.section-center .page-card:nth-child(5) {
  animation-delay: 0.65s;
}

.section-center .page-card:nth-child(6) {
  animation-delay: 0.75s;
}


@keyframes otCardReveal {

  from {
    opacity: 0;

    transform:
      translateY(28px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =====================================================
   FEATURE NUMBER
===================================================== */

.section-center .page-card .feature-number {
  position: relative;
  z-index: 3;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.section-center .page-card:hover .feature-number {
  color: #224F61;

  transform: translateX(3px);
}


/* =====================================================
   STATUS INDICATOR
===================================================== */

.section-center .page-card::before {
  content: "";

  position: absolute;

  top: 18px;
  right: 18px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  opacity: 0.35;

  z-index: 3;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.section-center .page-card:hover::before {
  opacity: 1;

  transform: scale(1.15);

  box-shadow:
    0 0 0 4px rgba(34, 79, 97, 0.10),
    0 0 14px rgba(34, 79, 97, 0.50);
}


/* =====================================================
   SCAN EFFECT
===================================================== */

.section-center .page-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: -80%;

  width: 45%;
  height: 100%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 79, 97, 0.10),
    rgba(34, 79, 97, 0.18),
    transparent
  );

  transform: skewX(-18deg);

  z-index: 1;
}


/* RUN SCAN ON HOVER */

.section-center .page-card:hover::after {
  animation: otCardScan 0.8s ease forwards;
}


@keyframes otCardScan {

  from {
    left: -80%;
  }

  to {
    left: 140%;
  }

}


/* =====================================================
   CARD HOVER
===================================================== */

.section-center .page-card:hover {
  transform:
    translateY(-7px)
    scale(1.015);

  border-color: rgba(34, 79, 97, 0.55);

  background-color: rgba(34, 79, 97, 0.055);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.16);
}


/* =====================================================
   CARD TEXT
===================================================== */

.section-center .page-card h3,
.section-center .page-card p {
  position: relative;
  z-index: 2;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


/* TITLE */

.section-center .page-card:hover h3 {
  color: #224F61;

  transform: translateX(3px);
}


/* DESCRIPTION */

.section-center .page-card:hover p {
  transform: translateX(3px);
}


/* =====================================================
   BOTTOM STATUS LINE
===================================================== */

.section-center .page-card {
  background-image:
    linear-gradient(
      90deg,
      #224F61,
      #224F61
    );

  background-repeat: no-repeat;

  background-position:
    left bottom;

  background-size:
    0 1px;

  transition:
    background-size 0.45s ease,
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}


.section-center .page-card:hover {
  background-size:
    100% 1px;
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .section-center .section-tag,
  .section-center .section-title,
  .section-center .page-card {
    opacity: 1;

    transform: none;

    animation: none;
  }

  .section-center .page-card::after {
    display: none;
  }

}

/* =====================================================
   METCODE OT - CAREERS RESUME UPLOAD
===================================================== */

.careers-upload-section {
  align-items: flex-start;
  gap: 70px;
}


/* LEFT SIDE */

.careers-upload-intro {
  flex: 1;
  max-width: 580px;
}


/* RIGHT PANEL */

.careers-upload-panel {
  flex: 1;
  width: 100%;
  max-width: 560px;
}


/* =====================================================
   FORM
===================================================== */

.resume-form {
  width: 100%;
  display: grid;
  gap: 18px;
}


.resume-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.resume-field > label {
  font-size: 10px;
  font-weight: 400;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.45);
}


/* INPUTS */

.resume-field input {
  width: 100%;

  padding: 14px 0;

  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  outline: none;

  background: transparent;

  color: #ffffff;

  font-family: inherit;
  font-size: 14px;

  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}


.resume-field input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}


.resume-field input:focus {
  border-color: #224F61;
}


/* =====================================================
   DROPZONE
===================================================== */

.resume-file-field {
  margin-top: 8px;
}


.resume-file-field > .resume-dropzone {
  position: relative;

  min-height: 96px;

  display: flex;
  align-items: center;

  gap: 16px;

  padding: 18px;

  cursor: pointer;

  border: 1px dashed rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.018);

  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}


.resume-dropzone:hover {
  border-color: rgba(34, 79, 97, 0.85);

  background: rgba(34, 79, 97, 0.06);

  transform: translateY(-2px);
}


/* =====================================================
   UPLOAD ICON - CSS ONLY
===================================================== */

.resume-upload-icon {
  position: relative;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border: 1px solid rgba(255, 255, 255, 0.10);
}


.resume-upload-icon::before {
  content: "";

  position: absolute;

  width: 12px;
  height: 12px;

  left: 50%;
  top: 11px;

  transform:
    translateX(-50%)
    rotate(45deg);

  border-left: 1px solid #224F61;
  border-top: 1px solid #224F61;
}


.resume-upload-icon::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 12px;

  width: 1px;
  height: 17px;

  background: #224F61;

  transform: translateX(-50%);
}


/* =====================================================
   UPLOAD COPY
===================================================== */

.resume-upload-copy {
  display: flex;
  flex-direction: column;

  gap: 4px;

  flex: 1;
}


.resume-upload-copy strong {
  font-size: 13px;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.9);
}


.resume-upload-copy small {
  font-size: 9px;

  letter-spacing: 0.05em;
  text-transform: lowercase;

  color: rgba(255, 255, 255, 0.35);
}


.resume-upload-action {
  font-size: 10px;

  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: #224F61;
}


/* =====================================================
   FILE PREVIEW
===================================================== */

.resume-preview {
  display: none;

  border: 1px solid rgba(255, 255, 255, 0.10);

  background: rgba(255, 255, 255, 0.018);

  overflow: hidden;
}


.resume-preview.active {
  display: block;

  animation: resumePreviewIn 0.4s ease forwards;
}


@keyframes resumePreviewIn {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* HEADER */

.resume-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.resume-preview-file {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}


.resume-preview-file > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.resume-preview-file strong {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.9);
}


.resume-preview-file small {
  font-size: 9px;

  letter-spacing: 0.04em;
  text-transform: lowercase;

  color: rgba(255, 255, 255, 0.35);
}


/* FILE ICON */

.resume-file-icon {
  position: relative;

  width: 28px;
  height: 34px;

  flex: 0 0 28px;

  border: 1px solid rgba(34, 79, 97, 0.8);
}


.resume-file-icon::before {
  content: "CV";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  font-size: 7px;

  letter-spacing: 0.08em;

  color: #224F61;
}


/* REMOVE */

.resume-remove {
  width: 30px;
  height: 30px;

  border: 0;

  cursor: pointer;

  background: transparent;

  color: rgba(255, 255, 255, 0.4);

  font-size: 20px;
  font-weight: 300;

  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}


.resume-remove:hover {
  color: #ffffff;

  background: rgba(255, 255, 255, 0.05);
}


/* =====================================================
   DOCUMENT VIEW
===================================================== */

.resume-document-preview {
  width: 100%;

  background: #111;
}


.resume-document-preview iframe {
  display: block;

  width: 100%;
  height: 440px;

  border: 0;

  background: #ffffff;
}


/* WORD DOCUMENT FALLBACK */

.resume-word-preview {
  min-height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  text-align: center;
}


.resume-word-preview span {
  font-size: 11px;
  line-height: 1.6;

  color: rgba(255, 255, 255, 0.4);
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.resume-submit {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 4px;

  border: 0;
  cursor: pointer;
}


.resume-submit:disabled {
  cursor: wait;

  opacity: 0.55;
}


.resume-submit-arrow {
  transition: transform 0.3s ease;
}


.resume-submit:hover .resume-submit-arrow {
  transform: translateX(5px);
}


/* =====================================================
   STATUS
===================================================== */

.resume-status {
  display: none;

  padding: 14px 16px;

  border-left: 2px solid #224F61;

  background: rgba(34, 79, 97, 0.08);

  font-size: 12px;

  color: rgba(255, 255, 255, 0.75);
}


.resume-status.active {
  display: block;
}


.resume-status.success {
  color: #ffffff;
}


.resume-status.error {
  border-color: #8e4646;

  background: rgba(142, 70, 70, 0.08);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

  .careers-upload-section {
    flex-direction: column;

    gap: 40px;
  }


  .careers-upload-intro,
  .careers-upload-panel {
    width: 100%;
    max-width: none;
  }

}


@media (max-width: 600px) {

  .resume-dropzone {
    align-items: flex-start;
  }


  .resume-upload-action {
    display: none;
  }


  .resume-document-preview iframe {
    height: 360px;
  }

}

.company-card {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 300px;
 
}

.company-card img {
  width: 200%;
  height: 300px;

8
  object-position: center;

  display: block;
}

/* =====================================================
   TYPING EFFECT
===================================================== */

.typing-text {
  min-height: 4.5em;
}

/* Cursor */

.typing-text::after {
  content: "";
  display: inline-block;

  width: 1px;
  height: 1em;

  margin-left: 4px;

  vertical-align: -2px;

  background: #224F61;

  animation: typingCursor 0.75s step-end infinite;
}

.typing-text.typing-complete::after {
  animation: typingCursor 0.75s step-end infinite;
}


@keyframes typingCursor {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}
/* =====================================================
   CLIENT LOGOS - ONE AT A TIME
===================================================== */

.company-grid .company-card {
  opacity: 0;
  transform: translateY(25px) scale(0.94);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(.22, .61, .36, 1);
}


/* Activated by JavaScript */

.company-grid.logos-visible .company-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* STAGGER */

.company-grid.logos-visible .company-card:nth-child(1) {
  transition-delay: 0s;
}

.company-grid.logos-visible .company-card:nth-child(2) {
  transition-delay: 0.30s;
}

.company-grid.logos-visible .company-card:nth-child(3) {
  transition-delay: 0.60s;
}

.company-grid.logos-visible .company-card:nth-child(4) {
  transition-delay: 0.90s;
}

.company-grid.logos-visible .company-card:nth-child(5) {
  transition-delay: 1.20s;
}

.company-grid.logos-visible .company-card:nth-child(6) {
  transition-delay: 1.50s;
}


/* LOGO */

.company-grid .company-card img {
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}


/* SUBTLE HOVER */

.company-grid .company-card:hover img {
  transform: scale(1.06);
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .company-grid .company-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

}


/* =====================================================
   COGNISAFE PRODUCT OVERVIEW
===================================================== */

.cognisafe-overview {
  position: relative;

  padding: 120px 6%;

  overflow: hidden;
}


/* subtle technical background */

.cognisafe-overview::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 20%,
      black 80%,
      transparent
    );
}


/* =====================================================
   HEADER
===================================================== */

.cognisafe-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

  gap: 80px;

  align-items: end;

  margin-bottom: 70px;
}


.cognisafe-intro {
  max-width: 620px;

  margin: 0;

  font-size: 0.88rem;
  line-height: 1.9;

  color: rgba(255,255,255,0.5);
}


/* =====================================================
   MAIN DEMO
===================================================== */

.cognisafe-demo {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(330px, 0.7fr)
    minmax(500px, 1.3fr);

  min-height: 670px;

  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}


/* =====================================================
   STEPS
===================================================== */

.cognisafe-steps {
  display: flex;
  flex-direction: column;

  border-right: 1px solid rgba(255,255,255,0.08);
}


.cognisafe-step {
  position: relative;

  display: grid;

  grid-template-columns: 48px 1fr 12px;

  gap: 20px;

  align-items: start;

  flex: 1;

  width: 100%;

  padding: 38px 36px 38px 0;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);

  outline: none;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 0.35s ease,
    padding-left 0.35s ease;
}


.cognisafe-step:last-child {
  border-bottom: 0;
}


.cognisafe-step:hover {
  background: rgba(255,255,255,0.018);

  padding-left: 12px;
}


.cognisafe-step.active {
  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,0.14),
      transparent
    );
}


/* indicator line */

.cognisafe-step::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 2px;
  height: 0;

  background: #224F61;

  transition: height 0.45s ease;
}


.cognisafe-step.active::before {
  height: 100%;
}


/* NUMBER */

.cognisafe-step-number {
  padding-top: 3px;

  font-size: 10px;

  letter-spacing: 0.12em;

  color: rgba(255,255,255,0.28);
}


.cognisafe-step.active
.cognisafe-step-number {
  color: #224F61;
}


/* COPY */

.cognisafe-step-copy {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.cognisafe-step-copy strong {
  font-size: 1rem;
  font-weight: 400;

  color: rgba(255,255,255,0.88);
}


.cognisafe-step-copy small {
  max-width: 370px;

  font-size: 0.76rem;
  line-height: 1.8;

  color: rgba(255,255,255,0.38);
}


/* STATUS DOT */

.cognisafe-step-status {
  width: 6px;
  height: 6px;

  margin-top: 7px;

  border-radius: 50%;

  background: rgba(255,255,255,0.15);

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}


.cognisafe-step.active
.cognisafe-step-status {
  background: #224F61;

  box-shadow:
    0 0 0 5px rgba(34,79,97,0.10),
    0 0 18px rgba(34,79,97,0.5);
}


/* =====================================================
   VISUAL SIDE
===================================================== */

.cognisafe-visual {
  display: flex;

  align-items: center;
  justify-content: center;

  padding: 55px;
}


/* DEVICE */

.cognisafe-device {
  width: min(100%, 670px);

  border: 1px solid rgba(255,255,255,0.12);

  background: #090909;

  box-shadow:
    0 40px 90px rgba(0,0,0,0.38);

  transform: perspective(1200px) rotateY(-2deg);

  transition: transform 0.5s ease;
}


.cognisafe-device:hover {
  transform:
    perspective(1200px)
    rotateY(0)
    translateY(-5px);
}


/* DEVICE HEADER */

.cognisafe-device-top {
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;

  border-bottom: 1px solid rgba(255,255,255,0.08);

  font-size: 11px;

  letter-spacing: 0.08em;

  color: rgba(255,255,255,0.65);
}


/* LIVE */

.cognisafe-live {
  display: flex;
  align-items: center;

  gap: 7px;

  font-size: 8px;

  letter-spacing: 0.12em;

  color: rgba(255,255,255,0.35);
}


.cognisafe-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 10px rgba(34,79,97,0.7);

  animation: cogniPulse 1.7s ease infinite;
}


@keyframes cogniPulse {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}


/* =====================================================
   CAMERA VIEW
===================================================== */

.cognisafe-screen {
  position: relative;

  height: 390px;

  overflow: hidden;

  background: #111;
}


.cognisafe-screen img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    saturate(0.75)
    contrast(1.05);

  transition:
    opacity 0.35s ease,
    transform 0.7s ease;
}


.cognisafe-screen.image-changing img {
  opacity: 0;

  transform: scale(1.03);
}


/* dark camera overlay */

.cognisafe-screen::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.1),
      transparent 45%,
      rgba(0,0,0,0.65)
    );
}


/* =====================================================
   SCAN FRAME
===================================================== */

.cognisafe-scan-frame {
  position: absolute;

  inset: 48px;

  z-index: 3;

  pointer-events: none;
}


.corner {
  position: absolute;

  width: 24px;
  height: 24px;

  border-color: rgba(255,255,255,0.7);
}


.corner.tl {
  top: 0;
  left: 0;

  border-top: 1px solid;
  border-left: 1px solid;
}


.corner.tr {
  top: 0;
  right: 0;

  border-top: 1px solid;
  border-right: 1px solid;
}


.corner.bl {
  bottom: 0;
  left: 0;

  border-bottom: 1px solid;
  border-left: 1px solid;
}


.corner.br {
  bottom: 0;
  right: 0;

  border-bottom: 1px solid;
  border-right: 1px solid;
}


/* SCANNING LINE */

.cognisafe-scan-line {
  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background: #224F61;

  box-shadow:
    0 0 14px rgba(34,79,97,0.8);

  animation: cogniScan 3s ease-in-out infinite;
}


@keyframes cogniScan {

  0% {
    top: 5%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 95%;
    opacity: 0;
  }
}


/* =====================================================
   HAZARD MARKER
===================================================== */

.cognisafe-hazard-marker {
  position: absolute;

  z-index: 5;

  top: 43%;
  left: 63%;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #224F61;

  border-radius: 50%;

  background: rgba(8,8,8,0.75);

  color: #ffffff;

  opacity: 0;

  transform: scale(0.6);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}


.cognisafe-hazard-marker.visible {
  opacity: 1;

  transform: scale(1);

  animation: hazardPulse 1.8s ease infinite;
}


@keyframes hazardPulse {

  50% {
    box-shadow:
      0 0 0 10px rgba(34,79,97,0.10);
  }

}


/* =====================================================
   CAMERA STATUS
===================================================== */

.cognisafe-screen-label {
  position: absolute;

  z-index: 5;

  left: 22px;
  bottom: 20px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.cognisafe-screen-label span {
  font-size: 8px;

  letter-spacing: 0.14em;

  color: rgba(255,255,255,0.45);
}


.cognisafe-screen-label strong {
  font-size: 12px;
  font-weight: 400;

  color: #ffffff;
}


/* =====================================================
   RESULT PANEL
===================================================== */

.cognisafe-result {
  display: grid;

  grid-template-columns: 1fr 145px;

  gap: 30px;

  padding: 23px 22px;

  border-top: 1px solid rgba(255,255,255,0.08);
}


.cognisafe-result-label {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;

  letter-spacing: 0.12em;

  color: #224F61;
}


.cognisafe-result h3 {
  margin: 0 0 7px;

  font-size: 0.95rem;
  font-weight: 400;

  color: rgba(255,255,255,0.88);
}


.cognisafe-result p {
  max-width: 430px;

  margin: 0;

  font-size: 0.7rem;
  line-height: 1.7;

  color: rgba(255,255,255,0.38);
}


/* =====================================================
   PROGRESS
===================================================== */

.cognisafe-progress {
  align-self: end;
}


.cognisafe-progress > span {
  display: block;

  margin-bottom: 9px;

  font-size: 8px;

  letter-spacing: 0.1em;

  text-align: right;

  color: rgba(255,255,255,0.3);
}


.cognisafe-progress-track {
  height: 1px;

  overflow: hidden;

  background: rgba(255,255,255,0.1);
}


.cognisafe-progress-bar {
  width: 33.33%;
  height: 100%;

  background: #224F61;

  transition: width 0.55s ease;
}


/* =====================================================
   DISCLAIMER
===================================================== */

.cognisafe-disclaimer {
  position: relative;
  z-index: 2;

  display: flex;

  gap: 30px;

  align-items: flex-start;

  padding-top: 28px;
}


.cognisafe-disclaimer span {
  flex: 0 0 auto;

  padding: 5px 8px;

  border: 1px solid rgba(34,79,97,0.5);

  font-size: 8px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: #224F61;
}


.cognisafe-disclaimer p {
  max-width: 720px;

  margin: 0;

  font-size: 0.68rem;
  line-height: 1.7;

  color: rgba(255,255,255,0.28);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 950px) {

  .cognisafe-header {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .cognisafe-demo {
    grid-template-columns: 1fr;
  }


  .cognisafe-steps {
    border-right: 0;

    border-bottom: 1px solid rgba(255,255,255,0.08);
  }


  .cognisafe-step {
    min-height: 140px;
  }


  .cognisafe-visual {
    padding: 40px 0;
  }


  .cognisafe-device {
    transform: none;
  }

}


@media (max-width: 600px) {

  .cognisafe-overview {
    padding:
      85px
      22px;
  }


  .cognisafe-step {
    grid-template-columns:
      35px
      1fr
      8px;

    padding:
      28px
      15px
      28px
      0;
  }


  .cognisafe-screen {
    height: 300px;
  }


  .cognisafe-scan-frame {
    inset: 30px;
  }


  .cognisafe-result {
    grid-template-columns: 1fr;
  }


  .cognisafe-progress > span {
    text-align: left;
  }


  .cognisafe-disclaimer {
    flex-direction: column;

    gap: 14px;
  }

}

/* =====================================================
   DELIVERY LIFECYCLE
===================================================== */

.delivery-lifecycle {
  position: relative;
  overflow: hidden;

  padding: 120px 6%;
}


/* technical background */

.delivery-lifecycle::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* =====================================================
   HEADER
===================================================== */

.delivery-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, .8fr);

  gap: 70px;

  align-items: end;

  margin-bottom: 75px;
}


.delivery-intro {
  max-width: 620px;

  margin: 0;

  font-size: .84rem;
  line-height: 1.9;

  color: rgba(255,255,255,.44);
}


/* =====================================================
   SHELL
===================================================== */

.lifecycle-shell {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(460px, 1.2fr)
    minmax(360px, .8fr);

 
 
}


/* =====================================================
   TRACK
===================================================== */

.lifecycle-track {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  min-height: 440px;

  padding: 70px 20px;

  align-items: center;

  border-right: 1px solid rgba(255,255,255,.08);
}


/* horizontal process line */

.lifecycle-line {
  position: absolute;

  left: 10%;
  right: 10%;

  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,.1),
      rgba(34,79,97,.9),
      rgba(34,79,97,.1)
    );

  transform: translateY(-50%);
}


/* flowing line effect */

.lifecycle-line::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent
    );

  width: 120px;

  animation: lifecycleFlow 3.8s linear infinite;
}


@keyframes lifecycleFlow {

  from {
    transform: translateX(-140px);
  }

  to {
    transform: translateX(900px);
  }

}


/* moving pulse */

.lifecycle-pulse {
  position: absolute;

  top: 50%;
  left: 0;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 0 6px rgba(34,79,97,.12),
    0 0 22px rgba(34,79,97,.75);

  transform:
    translate(-50%, -50%);

  transition:
    left .7s cubic-bezier(.22,.61,.36,1);
}


/* =====================================================
   STAGES
===================================================== */

.lifecycle-stage {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 25px;

  padding: 30px 12px;

  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;

  text-align: center;

  transition:
    transform .35s ease,
    opacity .35s ease;
}


.lifecycle-stage:hover {
  transform: translateY(-8px);
}


/* NODE */

.lifecycle-node {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 82px;
  height: 82px;

  border: 1px solid rgba(255,255,255,.14);

  border-radius: 50%;

  background: #0a0a0a;

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    background-color .4s ease;
}


.lifecycle-stage.active .lifecycle-node {
  border-color: #224F61;

  background: rgba(34,79,97,.08);

  transform: scale(1.12);

  box-shadow:
    0 0 0 8px rgba(34,79,97,.06),
    0 0 35px rgba(34,79,97,.18);
}


/* spinning ring */

.lifecycle-node::before {
  content: "";

  position: absolute;

  inset: -9px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-top-color:
    rgba(34,79,97,.7);

  opacity: 0;

  transition: opacity .3s ease;
}


.lifecycle-stage.active
.lifecycle-node::before {
  opacity: 1;

  animation:
    lifecycleSpin
    4s
    linear
    infinite;
}


@keyframes lifecycleSpin {

  to {
    transform: rotate(360deg);
  }

}


/* NUMBER */

.lifecycle-node .feature-number {
  margin: 0;

  font-size: .78rem;

  color: rgba(255,255,255,.35);
}


.lifecycle-stage.active
.feature-number {
  color: #224F61;
}


/* =====================================================
   COPY
===================================================== */

.lifecycle-copy {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.lifecycle-copy strong {
  font-size: 1rem;
  font-weight: 400;

  color: rgba(255,255,255,.78);

  transition: color .3s ease;
}


.lifecycle-stage.active
.lifecycle-copy strong {
  color: #ffffff;
}


.lifecycle-copy small {
  max-width: 175px;

  font-size: .68rem;
  line-height: 1.65;

  color: rgba(255,255,255,.28);
}


/* =====================================================
   DETAIL PANEL
===================================================== */

.lifecycle-detail {
  position: relative;

  display: flex;
  flex-direction: column;

  justify-content: center;

  min-height: 440px;

  padding: 60px 50px;

  background:
    linear-gradient(
      135deg,
      rgba(34,79,97,.06),
      transparent 45%
    );
}


.lifecycle-detail::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 2px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #224F61,
      transparent
    );
}


/* top */

.lifecycle-detail-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 35px;
}


.lifecycle-detail-index {
  font-size: .68rem;

  letter-spacing: .13em;

  color: #224F61;
}


.lifecycle-status {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: .55rem;

  letter-spacing: .14em;

  color: rgba(255,255,255,.32);
}


.lifecycle-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  animation:
    lifecycleStatus
    1.5s
    ease
    infinite;
}


@keyframes lifecycleStatus {

  50% {
    opacity: .25;
  }

}


/* heading */

.lifecycle-detail h3 {
  margin: 0 0 18px;

  font-size: 2rem;
  font-weight: 400;

  color: rgba(255,255,255,.92);
}


.lifecycle-detail > p {
  max-width: 520px;

  margin: 0;

  font-size: .82rem;
  line-height: 1.9;

  color: rgba(255,255,255,.42);
}


/* =====================================================
   DETAIL GRID
===================================================== */

.lifecycle-detail-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

  margin-top: 45px;
}


.lifecycle-detail-grid > div {
  padding-top: 18px;

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


.detail-label {
  display: block;

  margin-bottom: 8px;

  font-size: .55rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(255,255,255,.25);
}


.lifecycle-detail-grid strong {
  font-size: .72rem;
  font-weight: 400;

  color: rgba(255,255,255,.68);
}


/* =====================================================
   PROGRESS
===================================================== */

.lifecycle-progress {
  margin-top: 42px;
}


.lifecycle-progress-line {
  height: 1px;

  overflow: hidden;

  background:
    rgba(255,255,255,.08);
}


.lifecycle-progress-line span {
  display: block;

  width: 25%;
  height: 100%;

  background: #224F61;

  transition:
    width .55s ease;
}


/* =====================================================
   FOOTER LOOP
===================================================== */

.lifecycle-footer {
  position: relative;
  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  padding-top: 26px;
}


.lifecycle-footer > span {
  font-size: .6rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(255,255,255,.24);
}


.lifecycle-loop-label {
  display: flex;

  align-items: center;

  gap: 12px;

  overflow: hidden;

  font-size: .55rem;

  letter-spacing: .12em;

  color: rgba(255,255,255,.22);

  animation:
    lifecycleDrift
    12s
    linear
    infinite;
}


@keyframes lifecycleDrift {

  50% {
    transform: translateX(-18px);
  }

}


/* =====================================================
   ACTIVE CHANGE ANIMATION
===================================================== */

.lifecycle-detail.is-changing h3,
.lifecycle-detail.is-changing p,
.lifecycle-detail.is-changing
.lifecycle-detail-grid {
  opacity: 0;

  transform: translateY(8px);
}


.lifecycle-detail h3,
.lifecycle-detail p,
.lifecycle-detail-grid {
  transition:
    opacity .25s ease,
    transform .25s ease;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 950px) {

  .delivery-header {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .lifecycle-shell {
    grid-template-columns: 1fr;
  }


  .lifecycle-track {
    grid-template-columns: 1fr;

    min-height: auto;

    padding: 20px 0;

    border-right: 0;
  }


  .lifecycle-line {
    left: 41px;
    right: auto;

    top: 10%;
    bottom: 10%;

    width: 1px;
    height: auto;

    transform: none;
  }


  .lifecycle-line::after {
    display: none;
  }


  .lifecycle-pulse {
    display: none;
  }


  .lifecycle-stage {
    flex-direction: row;

    text-align: left;

    justify-content: flex-start;

    padding: 22px 0;
  }


  .lifecycle-node {
    flex: 0 0 82px;
  }


  .lifecycle-copy small {
    max-width: 100%;
  }


  .lifecycle-detail {
    min-height: 400px;

    padding: 45px 30px;
  }

}


@media (max-width: 600px) {

  .delivery-lifecycle {
    padding: 85px 22px;
  }


  .lifecycle-detail-grid {
    grid-template-columns: 1fr;
  }


  .lifecycle-footer {
    flex-direction: column;

    align-items: flex-start;
  }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

  .lifecycle-line::after,
  .lifecycle-node::before,
  .lifecycle-status i,
  .lifecycle-loop-label {
    animation: none;
  }

}

.scope-grid .scope-box {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* =====================================================
   APPLICATIONS MAP
===================================================== */

.applications-map {
  position: relative;
  padding: 120px 6%;
  overflow: hidden;
}


/* technical grid */

.applications-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );

  background-size: 58px 58px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* HEADER */

.applications-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(300px,.8fr);

  gap: 70px;

  align-items: end;

  margin-bottom: 70px;
}


.applications-intro {
  margin: 0;

  max-width: 590px;

  font-size: .84rem;
  line-height: 1.9;

  color: rgba(255,255,255,.42);
}


/* =====================================================
   MAIN SHELL
===================================================== */

.applications-shell {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(520px,1.2fr)
    minmax(340px,.8fr);

  min-height: 620px;
}


/* =====================================================
   VISUAL NETWORK
===================================================== */

.applications-visual {
  position: relative;

  min-height: 620px;
}


.applications-network {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 620px;
}


/* =====================================================
   CENTER CORE
===================================================== */

.applications-core {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 180px;
  height: 180px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      rgba(34,79,97,.14),
      rgba(10,10,10,.95) 65%
    );

  border:
    1px solid
    rgba(34,79,97,.45);

  box-shadow:
    0 0 55px rgba(34,79,97,.12);
}


.core-label {
  position: relative;
  z-index: 4;

  display: flex;
  flex-direction: column;

  text-align: center;

  gap: 6px;
}


.core-label small {
  font-size: .52rem;

  letter-spacing: .16em;

  color: #224F61;
}


.core-label strong {
  max-width: 115px;

  font-size: .9rem;
  font-weight: 400;
  line-height: 1.35;

  color: rgba(255,255,255,.82);
}


/* ROTATING RINGS */

.core-ring {
  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.05);
}


.ring-1 {
  inset: -18px;

  border-top-color:
    rgba(34,79,97,.7);

  animation:
    applicationRotate
    9s
    linear
    infinite;
}


.ring-2 {
  inset: -38px;

  border-bottom-color:
    rgba(34,79,97,.35);

  animation:
    applicationRotateReverse
    14s
    linear
    infinite;
}


@keyframes applicationRotate {
  to {
    transform: rotate(360deg);
  }
}


@keyframes applicationRotateReverse {
  to {
    transform: rotate(-360deg);
  }
}


/* =====================================================
   APPLICATION NODES
===================================================== */

.application-node {
  position: absolute;

  z-index: 4;

  width: 155px;
  min-height: 88px;

  padding: 16px 18px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    rgba(8,8,8,.88);

  color: inherit;

  cursor: pointer;

  text-align: left;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background-color .35s ease,
    box-shadow .35s ease;
}


.application-node:hover {
  transform: scale(1.06);

  border-color:
    rgba(34,79,97,.55);

  background:
    rgba(34,79,97,.06);
}


.application-node.active {
  border-color: #224F61;

  background:
    rgba(34,79,97,.09);

  box-shadow:
    0 0 0 1px rgba(34,79,97,.08),
    0 15px 35px rgba(0,0,0,.24);
}


/* NODE STATUS LINE */

.application-node::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: #224F61;

  transition:
    width .4s ease;
}


.application-node.active::after {
  width: 100%;
}


.node-number {
  display: block;

  margin-bottom: 12px;

  font-size: .58rem;

  letter-spacing: .14em;

  color: rgba(255,255,255,.26);
}


.application-node.active
.node-number {
  color: #224F61;
}


.application-node strong {
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;

  color: rgba(255,255,255,.72);
}


/* POSITIONS */

.node-1 {
  top: 7%;
  left: 8%;
}


.node-2 {
  top: 8%;
  right: 7%;
}


.node-3 {
  top: 42%;
  right: 2%;
}


.node-4 {
  bottom: 6%;
  right: 9%;
}


.node-5 {
  bottom: 7%;
  left: 8%;
}


.node-6 {
  top: 42%;
  left: 2%;
}


/* =====================================================
   CONNECTION LINES
===================================================== */

.network-line {
  position: absolute;

  z-index: 1;

  left: 50%;
  top: 50%;

  width: 220px;
  height: 1px;

  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,.6),
      rgba(34,79,97,.08)
    );

  overflow: hidden;
}


.network-line::after {
  content: "";

  position: absolute;

  top: 0;
  left: -35%;

  width: 34%;
  height: 1px;

  background:
    rgba(255,255,255,.8);

  animation:
    applicationSignal
    3s linear infinite;
}


@keyframes applicationSignal {

  from {
    left: -35%;
  }

  to {
    left: 110%;
  }

}


.line-1 {
  transform: rotate(218deg);
}


.line-2 {
  transform: rotate(322deg);
}


.line-3 {
  transform: rotate(0deg);
}


.line-4 {
  transform: rotate(38deg);
}


.line-5 {
  transform: rotate(142deg);
}


.line-6 {
  transform: rotate(180deg);
}


/* stagger signal movement */

.line-2::after {
  animation-delay: .5s;
}

.line-3::after {
  animation-delay: 1s;
}

.line-4::after {
  animation-delay: 1.5s;
}

.line-5::after {
  animation-delay: 2s;
}

.line-6::after {
  animation-delay: 2.5s;
}


/* =====================================================
   DETAIL PANEL
===================================================== */

.applications-detail {
  position: relative;

  display: flex;
  flex-direction: column;

  justify-content: center;

  min-height: 620px;

  padding: 60px 50px;

  background:
    linear-gradient(
      135deg,
      rgba(34,79,97,.055),
      transparent 50%
    );
}


.applications-detail::before {
  content: "";

  position: absolute;

  left: 0;
  top: 15%;
  bottom: 15%;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #224F61,
      transparent
    );
}


/* TOP */

.applications-detail-top {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  align-items: center;

  margin-bottom: 45px;
}


#applicationIndex {
  font-size: .6rem;

  letter-spacing: .14em;

  color: #224F61;
}


.applications-status {
  display: flex;
  align-items: center;

  gap: 8px;

  font-size: .52rem;

  letter-spacing: .12em;

  color: rgba(255,255,255,.28);
}


.applications-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 12px rgba(34,79,97,.8);

  animation:
    applicationStatus
    1.5s ease infinite;
}


@keyframes applicationStatus {

  50% {
    opacity: .25;
  }

}


/* TEXT */

.applications-detail h3 {
  margin: 0 0 18px;

  font-size: 2rem;
  font-weight: 400;

  color: rgba(255,255,255,.9);
}


.applications-detail > p {
  margin: 0;

  max-width: 520px;

  font-size: .8rem;
  line-height: 1.9;

  color: rgba(255,255,255,.4);
}


/* =====================================================
   META
===================================================== */

.applications-meta {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-top: 48px;
}


.applications-meta > div {
  padding-top: 17px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.applications-meta span {
  display: block;

  margin-bottom: 8px;

  font-size: .52rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(255,255,255,.22);
}


.applications-meta strong {
  font-size: .7rem;
  font-weight: 400;

  color: rgba(255,255,255,.62);
}


/* =====================================================
   METER
===================================================== */

.applications-meter {
  margin-top: 45px;
}


.applications-meter > span {
  display: block;

  margin-bottom: 10px;

  font-size: .5rem;

  letter-spacing: .12em;

  color: rgba(255,255,255,.22);
}


.applications-meter > div {
  height: 1px;

  background:
    rgba(255,255,255,.07);

  overflow: hidden;
}


.applications-meter i {
  display: block;

  width: 16.66%;
  height: 100%;

  background: #224F61;

  transition:
    width .5s ease;
}


/* =====================================================
   CHANGE ANIMATION
===================================================== */

.applications-detail.is-changing h3,
.applications-detail.is-changing > p,
.applications-detail.is-changing
.applications-meta {
  opacity: 0;

  transform:
    translateY(8px);
}


.applications-detail h3,
.applications-detail > p,
.applications-meta {
  transition:
    opacity .22s ease,
    transform .22s ease;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 1000px) {

  .applications-header {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .applications-shell {
    grid-template-columns: 1fr;
  }


  .applications-visual {
    min-height: 650px;
  }


  .applications-detail {
    min-height: auto;

    padding: 50px 30px;
  }


  .applications-detail::before {
    display: none;
  }

}


@media (max-width: 650px) {

  .applications-map {
    padding: 85px 22px;
  }


  .applications-visual {
    min-height: auto;
  }


  .applications-network {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 12px;

    min-height: auto;
  }


  .applications-core,
  .network-line {
    display: none;
  }


  .application-node {
    position: relative;

    inset: auto;

    width: 100%;
    min-height: 110px;
  }


  .applications-meta {
    grid-template-columns: 1fr;
  }

}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

  .core-ring,
  .network-line::after,
  .applications-status i {
    animation: none;
  }

}

/* =====================================================
   HOW WE WORK
===================================================== */

.how-work-flow {
  position: relative;
  padding: 120px 6%;
  overflow: hidden;
}


/* technical background */

.how-work-flow::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );

  background-size: 62px 62px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 18%,
      black 82%,
      transparent
    );
}


/* HEADER */

.how-work-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(300px,.8fr);

  gap: 70px;

  align-items: end;

  margin-bottom: 90px;
}


.how-work-intro {
  margin: 0;

  max-width: 590px;

  font-size: .84rem;
  line-height: 1.9;

  color: rgba(255,255,255,.42);
}


/* =====================================================
   PIPELINE
===================================================== */

.work-pipeline {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 0;

  padding: 45px 0 65px;
}


/* TRACK */

.pipeline-track {
  position: absolute;

  left: 9%;
  right: 9%;

  top: 85px;

  height: 1px;

  background:
    rgba(255,255,255,.08);
}


/* progress */

.pipeline-progress {
  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 1px;

  background: #224F61;

  box-shadow:
    0 0 15px rgba(34,79,97,.5);

  transition:
    width .7s
    cubic-bezier(.22,.61,.36,1);
}


/* =====================================================
   MOVING WORK PACKAGE
===================================================== */

.moving-package {
  position: absolute;

  top: 50%;
  left: 0;

  width: 18px;
  height: 18px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border:
    1px solid
    #224F61;

  background:
    #0a0a0a;

  transition:
    left .7s
    cubic-bezier(.22,.61,.36,1);

  box-shadow:
    0 0 18px
    rgba(34,79,97,.42);
}


.moving-package i {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 4px;
  height: 4px;

  transform:
    translate(-50%,-50%);

  background: #224F61;
}


/* pulse */

.moving-package::after {
  content: "";

  position: absolute;

  inset: -7px;

  border:
    1px solid
    rgba(34,79,97,.35);

  animation:
    workPackagePulse
    1.6s ease infinite;
}


@keyframes workPackagePulse {

  0% {
    transform: scale(.7);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }

}


/* =====================================================
   STAGES
===================================================== */

.pipeline-stage {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 30px;

  padding: 0 20px;

  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;

  text-align: center;
}


/* NODE */

.stage-node {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.12);

  background: #090909;

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}


.pipeline-stage:hover
.stage-node {
  transform: scale(1.08);
}


.pipeline-stage.active
.stage-node {
  border-color: #224F61;

  transform: scale(1.12);

  box-shadow:
    0 0 0 8px
    rgba(34,79,97,.05),
    0 0 30px
    rgba(34,79,97,.2);
}


/* rotating active indicator */

.stage-node::before {
  content: "";

  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border:
    1px solid
    transparent;

  border-top-color:
    rgba(34,79,97,.8);

  opacity: 0;
}


.pipeline-stage.active
.stage-node::before {
  opacity: 1;

  animation:
    workStageRotate
    3.8s linear infinite;
}


@keyframes workStageRotate {

  to {
    transform: rotate(360deg);
  }

}


/* NUMBER */

.stage-node .feature-number {
  margin: 0;

  font-size: .72rem;

  color:
    rgba(255,255,255,.3);
}


.pipeline-stage.active
.feature-number {
  color: #224F61;
}


/* =====================================================
   STAGE CONTENT
===================================================== */

.stage-content {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 7px;
}


.stage-content small {
  font-size: .5rem;

  letter-spacing: .15em;

  color:
    rgba(255,255,255,.2);
}


.pipeline-stage.active
.stage-content small {
  color: #224F61;
}


.stage-content strong {
  font-size: 1rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.76);
}


.pipeline-stage.active
.stage-content strong {
  color: #fff;
}


.stage-content > span {
  max-width: 190px;

  font-size: .68rem;
  line-height: 1.7;

  color:
    rgba(255,255,255,.3);
}


/* =====================================================
   STATUS PANEL
===================================================== */

.work-status-panel {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    1.15fr
    .85fr;

  gap: 70px;

  margin-top: 30px;

  padding: 45px 0;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


/* LEFT */

.work-status-left {
  display: grid;

  grid-template-columns:
    65px 1fr;

  gap: 30px;
}


.status-index {
  font-size: .65rem;

  letter-spacing: .12em;

  color: #224F61;
}


.work-status-left small {
  display: block;

  margin-bottom: 10px;

  font-size: .52rem;

  letter-spacing: .14em;

  color:
    rgba(255,255,255,.22);
}


.work-status-left h3 {
  margin:
    0 0 12px;

  font-size: 1.5rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.9);
}


.work-status-left p {
  margin: 0;

  max-width: 620px;

  font-size: .78rem;
  line-height: 1.85;

  color:
    rgba(255,255,255,.38);
}


/* =====================================================
   DATA
===================================================== */

.work-status-data {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 20px;

  align-content: center;
}


.work-status-data > div {
  padding-top: 15px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.work-status-data span {
  display: block;

  margin-bottom: 8px;

  font-size: .48rem;

  letter-spacing: .12em;

  color:
    rgba(255,255,255,.2);
}


.work-status-data strong {
  font-size: .66rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.64);
}


/* live status */

.live-status {
  display: flex;

  align-items: center;

  gap: 7px;
}


.live-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 10px
    rgba(34,79,97,.8);

  animation:
    workStatusPulse
    1.4s ease infinite;
}


@keyframes workStatusPulse {

  50% {
    opacity: .25;
  }

}


/* =====================================================
   PANEL TRANSITION
===================================================== */

.work-status-panel.changing
.work-status-left > div,

.work-status-panel.changing
.work-status-data {
  opacity: 0;

  transform:
    translateY(7px);
}


.work-status-left > div,
.work-status-data {
  transition:
    opacity .22s ease,
    transform .22s ease;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:900px) {

  .how-work-header {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .work-pipeline {
    grid-template-columns: 1fr;

    gap: 0;

    padding-left: 0;
  }


  .pipeline-track {
    left: 39px;
    top: 70px;
    bottom: 70px;

    right: auto;

    width: 1px;
    height: auto;
  }


  .pipeline-progress,
  .moving-package {
    display: none;
  }


  .pipeline-stage {
    flex-direction: row;

    align-items: center;

    text-align: left;

    padding: 18px 0;
  }


  .stage-node {
    flex: 0 0 80px;
  }


  .stage-content {
    align-items: flex-start;
  }


  .stage-content > span {
    max-width: 100%;
  }


  .work-status-panel {
    grid-template-columns: 1fr;

    gap: 40px;
  }

}


@media(max-width:600px) {

  .how-work-flow {
    padding: 85px 22px;
  }


  .work-status-left {
    grid-template-columns: 1fr;
  }


  .work-status-data {
    grid-template-columns: 1fr;
  }

}


@media(prefers-reduced-motion:reduce) {

  .moving-package::after,
  .stage-node::before,
  .live-status i {
    animation: none;
  }

}


/* =====================================================
   HOW WE WORK - PROJECT JOURNEY
===================================================== */

.work-journey {
  position: relative;
  padding: 120px 6%;
  overflow: hidden;
}


/* technical background */

.work-journey::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.02) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.02) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* HEADER */

.work-journey__header {
  position: relative;
  z-index: 2;

  margin-bottom: 85px;
}


/* =====================================================
   JOURNEY TRACK
===================================================== */

.work-journey__track {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 0;

  padding: 40px 0 70px;
}


/* LINE */

.work-journey__line {
  position: absolute;

  top: 78px;
  left: 12.5%;
  right: 12.5%;

  height: 1px;

  background:
    rgba(255,255,255,.08);
}


.work-journey__progress {
  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 1px;

  background: #224F61;

  box-shadow:
    0 0 15px rgba(34,79,97,.55);

  transition:
    width .65s cubic-bezier(.22,.61,.36,1);
}


/* moving marker */

.work-journey__marker {
  position: absolute;

  left: 0;
  top: 50%;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: #224F61;

  transform:
    translate(-50%,-50%);

  box-shadow:
    0 0 0 6px rgba(34,79,97,.08),
    0 0 20px rgba(34,79,97,.7);

  transition:
    left .65s cubic-bezier(.22,.61,.36,1);
}


.work-journey__marker::after {
  content: "";

  position: absolute;

  inset: -7px;

  border-radius: 50%;

  border:
    1px solid rgba(34,79,97,.35);

  animation:
    workJourneyPulse
    1.6s ease infinite;
}


@keyframes workJourneyPulse {

  from {
    transform: scale(.6);
    opacity: 1;
  }

  to {
    transform: scale(1.7);
    opacity: 0;
  }

}


/* =====================================================
   STEPS
===================================================== */

.work-step {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 28px;

  padding: 0 18px;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: center;

  cursor: pointer;
}


/* NODE */

.work-step__node {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 76px;
  height: 76px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.12);

  background: #090909;

  font-size: .68rem;

  color:
    rgba(255,255,255,.3);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    color .35s ease;
}


.work-step:hover
.work-step__node {
  transform:
    translateY(-5px)
    scale(1.05);
}


.work-step.active
.work-step__node {
  border-color: #224F61;

  color: #224F61;

  transform: scale(1.1);

  box-shadow:
    0 0 0 8px rgba(34,79,97,.05),
    0 0 28px rgba(34,79,97,.18);
}


/* rotating ring */

.work-step__node::before {
  content: "";

  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border: 1px solid transparent;

  border-top-color:
    rgba(34,79,97,.75);

  opacity: 0;
}


.work-step.active
.work-step__node::before {
  opacity: 1;

  animation:
    workJourneyRotate
    4s linear infinite;
}


@keyframes workJourneyRotate {

  to {
    transform: rotate(360deg);
  }

}


/* COPY */

.work-step__copy {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 7px;
}


.work-step__copy small {
  font-size: .48rem;

  letter-spacing: .15em;

  color:
    rgba(255,255,255,.2);
}


.work-step.active
.work-step__copy small {
  color: #224F61;
}


.work-step__copy strong {
  font-size: 1rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.72);
}


.work-step.active
.work-step__copy strong {
  color: #fff;
}


.work-step__copy > span {
  max-width: 200px;

  font-size: .68rem;
  line-height: 1.7;

  color:
    rgba(255,255,255,.3);
}


/* =====================================================
   DETAIL PANEL
===================================================== */

.work-journey__detail {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap: 70px;

  padding: 45px 0;

  border-top:
    1px solid rgba(255,255,255,.07);

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.work-detail__index {
  display: block;

  margin-bottom: 20px;

  font-size: .6rem;

  letter-spacing: .14em;

  color: #224F61;
}


.work-detail__phase {
  margin: 0 0 10px;

  font-size: .5rem;

  letter-spacing: .14em;

  color:
    rgba(255,255,255,.22);
}


.work-journey__detail h3 {
  margin: 0 0 15px;

  font-size: 1.6rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.9);
}


.work-journey__detail p:last-child {
  max-width: 650px;

  margin: 0;

  font-size: .78rem;
  line-height: 1.85;

  color:
    rgba(255,255,255,.38);
}


/* DATA */

.work-journey__data {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 20px;

  align-content: center;
}


.work-journey__data > div {
  padding-top: 15px;

  border-top:
    1px solid rgba(255,255,255,.07);
}


.work-journey__data span {
  display: block;

  margin-bottom: 8px;

  font-size: .48rem;

  letter-spacing: .12em;

  color:
    rgba(255,255,255,.2);
}


.work-journey__data strong {
  font-size: .66rem;
  font-weight: 400;

  color:
    rgba(255,255,255,.62);
}


/* LIVE */

.work-live {
  display: flex;

  align-items: center;

  gap: 7px;
}


.work-live i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 10px rgba(34,79,97,.75);

  animation:
    workLivePulse
    1.4s ease infinite;
}


@keyframes workLivePulse {

  50% {
    opacity: .25;
  }

}


/* DETAIL CHANGE */

.work-journey__detail.changing > div {
  opacity: 0;

  transform: translateY(7px);
}


.work-journey__detail > div {
  transition:
    opacity .22s ease,
    transform .22s ease;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:850px) {

  .work-journey__track {
    grid-template-columns: 1fr;

    gap: 0;
  }


  .work-journey__line {
    left: 37px;
    right: auto;

    top: 78px;
    bottom: 78px;

    width: 1px;
    height: auto;
  }


  .work-journey__progress,
  .work-journey__marker {
    display: none;
  }


  .work-step {
    flex-direction: row;

    text-align: left;

    align-items: center;

    padding: 18px 0;
  }


  .work-step__node {
    flex: 0 0 76px;
  }


  .work-step__copy {
    align-items: flex-start;
  }


  .work-step__copy > span {
    max-width: 100%;
  }


  .work-journey__detail {
    grid-template-columns: 1fr;

    gap: 40px;
  }

}


@media(max-width:600px) {

  .work-journey {
    padding: 85px 22px;
  }


  .work-journey__data {
    grid-template-columns: 1fr;
  }

}


@media(prefers-reduced-motion:reduce) {

  .work-journey__marker::after,
  .work-step__node::before,
  .work-live i {
    animation: none;
  }

}

.applications-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.application-photo-card {
  position: relative;
  display: block;
  min-height: 330px;
  overflow: hidden;
  background: #0a0a0a;
  text-decoration: none;
}

.application-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(100%) brightness(.55);
  transform: scale(1.01);

  transition:
    transform .7s cubic-bezier(.22,.61,.36,1),
    filter .6s ease;
}

.application-photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.4) 45%,
      rgba(0,0,0,.08) 100%
    );

  transition: background .4s ease;
}

.application-photo-overlay {
  position: absolute;
  z-index: 2;

  left: 28px;
  right: 28px;
  bottom: 28px;

  text-align: left;

  transition:
    transform .4s ease;
}

.application-photo-overlay .feature-number {
  display: block;
  margin-bottom: 10px;

  font-size: .58rem;
  letter-spacing: .14em;

  color: rgba(255,255,255,.4);
}

.application-photo-overlay h3 {
  margin: 0;

  font-size: 1.15rem;
  font-weight: 400;

  color: rgba(255,255,255,.95);
}

/* Accent line */

.application-photo-card::after {
  content: "";

  position: absolute;
  z-index: 3;

  left: 28px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: #224F61;

  transition: width .45s ease;
}


/* HOVER */

.application-photo-card:hover img {
  transform: scale(1.08);

  filter:
    grayscale(0%)
    brightness(.75);
}

.application-photo-card:hover::before {
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.25) 52%,
      rgba(0,0,0,.02) 100%
    );
}

.application-photo-card:hover
.application-photo-overlay {
  transform: translateY(-8px);
}

.application-photo-card:hover::after {
  width: calc(100% - 56px);
}


/* RESPONSIVE */

@media (max-width: 950px) {
  .applications-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .applications-photo-grid {
    grid-template-columns: 1fr;
  }

  .application-photo-card {
    min-height: 280px;
  }
}

/* =====================================================
   MODERN HOW WE WORK
===================================================== */

.modern-workflow {
  position: relative;
  padding: 120px 6%;
  overflow: hidden;
}


/* HEADER */

.modern-workflow__header {
  max-width: 950px;
  margin-bottom: 80px;
}

.modern-workflow__intro {
  max-width: 660px;
  margin-top: 24px;

  font-size: .82rem;
  line-height: 1.9;

  color: rgba(255,255,255,.4);
}


/* =====================================================
   STEPS
===================================================== */

.modern-workflow__steps {
  position: relative;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 40px;
}


/* BASE LINE */

.modern-workflow__line {
  position: absolute;

  top: 37px;
  left: 9%;
  right: 9%;

  height: 1px;

  background: rgba(255,255,255,.08);

  overflow: hidden;
}

.modern-workflow__line span {
  display: block;

  width: 34%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #224F61,
      transparent
    );

  animation: modernWorkflowFlow 4s linear infinite;
}

@keyframes modernWorkflowFlow {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(400%);
  }
}


/* STEP */

.modern-workflow__step {
  position: relative;
  z-index: 2;
}


/* NODE */

.modern-workflow__node {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 74px;
  height: 74px;

  margin-bottom: 35px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.12);

  background: #090909;

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.modern-workflow__node span {
  font-size: .62rem;

  letter-spacing: .12em;

  color: rgba(255,255,255,.34);

  transition: color .3s ease;
}


/* HOVER */

.modern-workflow__step:hover
.modern-workflow__node {
  transform: translateY(-5px) scale(1.05);

  border-color: rgba(34,79,97,.65);

  box-shadow:
    0 0 0 7px rgba(34,79,97,.04),
    0 12px 30px rgba(0,0,0,.24);
}

.modern-workflow__step:hover
.modern-workflow__node span {
  color: #224F61;
}


/* ACTIVE FIRST NODE */

.modern-workflow__step.active
.modern-workflow__node {
  border-color: #224F61;

  box-shadow:
    0 0 0 7px rgba(34,79,97,.04),
    0 0 28px rgba(34,79,97,.14);
}

.modern-workflow__step.active
.modern-workflow__node span {
  color: #224F61;
}


/* NODE RING */

.modern-workflow__step:hover
.modern-workflow__node::after,
.modern-workflow__step.active
.modern-workflow__node::after {
  content: "";

  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border: 1px solid transparent;

  border-top-color: rgba(34,79,97,.65);

  animation: workflowNodeRotate 4s linear infinite;
}

@keyframes workflowNodeRotate {
  to {
    transform: rotate(360deg);
  }
}


/* =====================================================
   CONTENT
===================================================== */

.modern-workflow__content {
  max-width: 250px;
}

.modern-workflow__content small {
  display: block;

  margin-bottom: 10px;

  font-size: .5rem;

  letter-spacing: .16em;

  color: #224F61;
}

.modern-workflow__content h3 {
  margin: 0 0 14px;

  font-size: 1.15rem;
  font-weight: 400;

  color: rgba(255,255,255,.9);
}

.modern-workflow__content p {
  margin: 0;

  min-height: 65px;

  font-size: .72rem;
  line-height: 1.8;

  color: rgba(255,255,255,.36);
}


/* OUTPUT */

.modern-workflow__output {
  display: inline-block;

  margin-top: 22px;
  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,.07);

  font-size: .56rem;

  letter-spacing: .05em;

  color: rgba(255,255,255,.28);

  transition:
    color .3s ease,
    border-color .3s ease;
}

.modern-workflow__step:hover
.modern-workflow__output {
  color: rgba(255,255,255,.58);

  border-color: #224F61;
}


/* =====================================================
   SUBTLE BOTTOM ACCENT
===================================================== */

.modern-workflow__step::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -25px;

  width: 0;
  height: 1px;

  background: #224F61;

  transition: width .4s ease;
}

.modern-workflow__step:hover::after {
  width: 70%;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

  .modern-workflow__steps {
    grid-template-columns: repeat(2, 1fr);

    gap: 65px 40px;
  }

  .modern-workflow__line {
    display: none;
  }

}


@media (max-width: 600px) {

  .modern-workflow {
    padding: 85px 22px;
  }

  .modern-workflow__steps {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .modern-workflow__step {
    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 25px;

    align-items: start;
  }

  .modern-workflow__node {
    margin: 0;
  }

  .modern-workflow__content {
    max-width: none;
  }

  .modern-workflow__content p {
    min-height: auto;
  }

}


@media (prefers-reduced-motion: reduce) {

  .modern-workflow__line span,
  .modern-workflow__node::after {
    animation: none !important;
  }

}

/* =========================================
   WHAT WE VALUE — ANIMATION ONLY
========================================= */

/* heading entrance */
.section-center > .section-tag,
.section-center > .section-title {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}

.section-center.values-visible > .section-tag,
.section-center.values-visible > .section-title {
  opacity: 1;
  transform: translateY(0);
}

.section-center > .section-title {
  transition-delay: .12s;
}


/* value items */

.values > div {
  position: relative;

  opacity: 0;
  transform: translateY(28px);

  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.22,.61,.36,1);
}


/* staggered entrance */

.values-visible .values > div:nth-child(1) {
  transition-delay: .25s;
}

.values-visible .values > div:nth-child(2) {
  transition-delay: .40s;
}

.values-visible .values > div:nth-child(3) {
  transition-delay: .55s;
}

.values-visible .values > div:nth-child(4) {
  transition-delay: .70s;
}


.values-visible .values > div {
  opacity: 1;
  transform: translateY(0);
}


/* number */

.values .feature-number {
  transition:
    color .35s ease,
    transform .35s ease;
}


/* title */

.values h3 {
  transition:
    transform .35s ease,
    color .35s ease;
}


/* text */

.values p {
  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* =========================================
   HOVER
========================================= */

.values > div:hover {
  transform: translateY(-7px);
}


.values > div:hover .feature-number {
  color: #224F61;
  transform: translateX(4px);
}


.values > div:hover h3 {
  transform: translateX(4px);
}


.values > div:hover p {
  opacity: .8;
  transform: translateX(4px);
}


/* small animated accent */

.values > div::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: #224F61;

  transition:
    width .45s cubic-bezier(.22,.61,.36,1);
}


.values > div:hover::after {
  width: 100%;
}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

  .section-center > .section-tag,
  .section-center > .section-title,
  .values > div {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* =====================================================
   CLIENT LOGO WALL
===================================================== */

.company-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  


}


/* LOGO AREA */

.company-card {
  position: relative;

  min-height: 10px;

  display: flex;
  align-items: center;
  justify-content: center;



  border: none !important;

 

  overflow: hidden;

  opacity: 0;
  transform: translateY(25px);

  transition:
    background .4s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}


/* subtle accent */

.company-card::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 2px;

  background: #224F61;

  transform: translateX(-50%);

  transition: width .45s ease;
}


/* LOGOS */

.company-card img {
  display: block;

  width: auto;
  height: auto;

  max-width: 440px;
  max-height: 305px;



 

  opacity: .7;

  transform: scale(.96);

  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    filter .45s ease,
    opacity .45s ease;
}


/* HOVER */



.company-card:hover img {
  transform: scale(1.08);

  filter:
    grayscale(0%)
    brightness(1);

  opacity: 1;
}

.company-card:hover::after {
  width: 60%;
}


/* =====================================================
   ENTRANCE
===================================================== */

.company-card.logo-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

  .company-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-card {
    min-height: 170px;
    padding: 30px;
  }

  .company-card img {
    max-width: 210px;
    max-height: 90px;
  }

}


@media (max-width: 560px) {

  .company-grid {
    grid-template-columns: 1fr;
  }

  .company-card {
    min-height: 145px;
  }

  .company-card img {
    max-width: 220px;
    max-height: 85px;
  }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .company-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .company-card img {
    transition: none;
  }

}

/* =====================================================
   INTERACTIVE EXPLORE LIST
===================================================== */

.explore-list-section {
  position: relative;
}

.explore-list {
  width: 100%;
  margin-top: 55px;

  border-top: 1px solid rgba(255,255,255,.08);
}


/* ITEM */

.explore-item {
  position: relative;

  display: grid;
  grid-template-columns: 70px 1fr 50px;
  align-items: center;

  gap: 30px;

  min-height: 125px;
  padding: 28px 12px;

  text-decoration: none;

  border-bottom: 1px solid rgba(255,255,255,.08);

  overflow: hidden;

  transition:
    padding-left .4s ease,
    background .4s ease;
}


/* BACKGROUND REVEAL */

.explore-item::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,.11),
      rgba(34,79,97,.025) 45%,
      transparent 80%
    );

  transform: translateX(-101%);

  transition:
    transform .55s cubic-bezier(.22,.61,.36,1);
}


.explore-item:hover::before {
  transform: translateX(0);
}


/* BOTTOM ACCENT */

.explore-item::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 0;
  height: 2px;

  background: #224F61;

  transition:
    width .45s ease;
}


.explore-item:hover::after {
  width: 100%;
}


/* NUMBER */

.explore-number {
  position: relative;
  z-index: 2;

  font-size: .58rem;
  letter-spacing: .15em;

  color: rgba(255,255,255,.25);

  transition:
    color .35s ease,
    transform .35s ease;
}


.explore-item:hover .explore-number {
  color: #224F61;

  transform: translateX(6px);
}


/* COPY */

.explore-copy {
  position: relative;
  z-index: 2;
}


.explore-copy h3 {
  margin: 0;

  font-size: 1.35rem;
  font-weight: 400;

  color: rgba(255,255,255,.88);

  transition:
    transform .35s ease,
    color .35s ease;
}


.explore-copy p {
  max-width: 650px;

  margin: 8px 0 0;

  font-size: .72rem;
  line-height: 1.75;

  color: rgba(255,255,255,.35);

  transition:
    color .35s ease,
    transform .35s ease;
}


.explore-item:hover .explore-copy h3 {
  color: #fff;

  transform: translateX(7px);
}


.explore-item:hover .explore-copy p {
  color: rgba(255,255,255,.55);

  transform: translateX(7px);
}


/* ARROW */

.explore-arrow {
  position: relative;
  z-index: 2;

  justify-self: end;

  font-size: 1rem;

  color: rgba(255,255,255,.22);

  transform: translate(-5px,5px);

  transition:
    transform .35s ease,
    color .35s ease;
}


.explore-item:hover .explore-arrow {
  color: #224F61;

  transform: translate(0,0);
}


/* =====================================================
   OPTIONAL ACTIVE LINE
===================================================== */

.explore-item:hover {
  padding-left: 20px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 700px) {

  .explore-list {
    margin-top: 40px;
  }

  .explore-item {
    grid-template-columns: 45px 1fr 30px;

    gap: 15px;

    min-height: 110px;

    padding: 22px 5px;
  }

  .explore-copy h3 {
    font-size: 1.08rem;
  }

  .explore-copy p {
    font-size: .68rem;
    line-height: 1.65;
  }

  .explore-arrow {
    font-size: .85rem;
  }

  .explore-item:hover {
    padding-left: 8px;
  }

}


@media (max-width: 480px) {

  .explore-item {
    grid-template-columns: 35px 1fr 24px;

    gap: 12px;
  }

  .explore-copy p {
    max-width: 95%;
  }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .explore-item,
  .explore-item::before,
  .explore-item::after,
  .explore-number,
  .explore-copy h3,
  .explore-copy p,
  .explore-arrow {
    transition: none !important;
  }

}

.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   RESOURCE CATEGORY — INTERACTIVE ANIMATION
========================================================= */

.resource-categories {
  --resource-accent: #224F61;

  position: relative;
}


/* ---------------------------------------------------------
   CATEGORY
--------------------------------------------------------- */

.resource-category {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    background .4s ease;
}


/* ---------------------------------------------------------
   INITIAL STATE
--------------------------------------------------------- */

.resource-categories.resource-animate .resource-category {
  opacity: 0;

  transform:
    translateY(30px)
    scale(.985);
}


/* ---------------------------------------------------------
   ENTER
--------------------------------------------------------- */

.resource-categories.resource-active .resource-category {
  animation:
    resourceCategoryEnter
    .8s cubic-bezier(.22,.61,.36,1)
    forwards;
}


.resource-categories.resource-active .resource-category:nth-child(1) {
  animation-delay: .05s;
}

.resource-categories.resource-active .resource-category:nth-child(2) {
  animation-delay: .14s;
}

.resource-categories.resource-active .resource-category:nth-child(3) {
  animation-delay: .23s;
}

.resource-categories.resource-active .resource-category:nth-child(4) {
  animation-delay: .32s;
}


@keyframes resourceCategoryEnter {

  0% {
    opacity: 0;

    transform:
      translateY(30px)
      scale(.985);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   SCANNING BACKGROUND
========================================================= */

.resource-category::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      100deg,
      transparent 0%,
      rgba(34,79,97,.025) 35%,
      rgba(34,79,97,.13) 50%,
      rgba(34,79,97,.025) 65%,
      transparent 100%
    );

  transform: translateX(-120%);

  pointer-events: none;
}


.resource-categories.resource-active
.resource-category::before {

  animation:
    resourceScan
    1.3s cubic-bezier(.22,.61,.36,1)
    forwards;
}


.resource-categories.resource-active
.resource-category:nth-child(1)::before {
  animation-delay: .2s;
}

.resource-categories.resource-active
.resource-category:nth-child(2)::before {
  animation-delay: .32s;
}

.resource-categories.resource-active
.resource-category:nth-child(3)::before {
  animation-delay: .44s;
}

.resource-categories.resource-active
.resource-category:nth-child(4)::before {
  animation-delay: .56s;
}


@keyframes resourceScan {

  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }

}


/* =========================================================
   ACTIVE BOTTOM LINE
========================================================= */

.resource-category::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--resource-accent);

  transition:
    width .5s cubic-bezier(.22,.61,.36,1);

  pointer-events: none;
}


.resource-category:hover::after {
  width: 100%;
}


/* =========================================================
   NUMBER
========================================================= */

.resource-category small {
  display: inline-block;

  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1),
    text-shadow .35s ease;
}


.resource-category:hover small {
  color: #6f929f;

  transform: translateX(6px);

  text-shadow:
    0 0 16px rgba(34,79,97,.55);
}


/* =========================================================
   TITLE
========================================================= */

.resource-category strong {
  position: relative;

  display: block;

  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1);
}


.resource-category:hover strong {
  color: #fff;

  transform: translateX(7px);
}


/* Arrow */

.resource-category strong::after {
  content: "↗";

  display: inline-block;

  margin-left: 12px;

  color: var(--resource-accent);

  opacity: 0;

  transform:
    translate(-8px, 8px);

  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1);
}


.resource-category:hover strong::after {
  opacity: 1;

  transform:
    translate(0, 0);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.resource-category p {
  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1);
}


.resource-category:hover p {
  color: rgba(255,255,255,.58);

  transform: translateX(7px);
}


/* =========================================================
   HOVER
========================================================= */

.resource-category:hover {
  transform: translateY(-6px);

  background:
    linear-gradient(
      135deg,
      rgba(34,79,97,.10),
      rgba(34,79,97,.025) 55%,
      transparent
    );
}


/* =========================================================
   ACTIVE / CLICK
========================================================= */

.resource-category:active {
  transform:
    translateY(-2px)
    scale(.99);
}


/* =========================================================
   KEYBOARD
========================================================= */

.resource-category:focus-visible {
  outline:
    1px solid rgba(34,79,97,.8);

  outline-offset: 4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .resource-category:hover {
    transform: translateY(-3px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .resource-categories.resource-animate
  .resource-category {

    opacity: 1;
    transform: none;
  }


  .resource-categories.resource-active
  .resource-category,

  .resource-categories.resource-active
  .resource-category::before {

    animation: none;
  }


  .resource-category,
  .resource-category small,
  .resource-category strong,
  .resource-category strong::after,
  .resource-category p,
  .resource-category::after {

    transition: none;
  }

}

/* =========================================================
   RESOURCE SEARCH SUGGESTIONS
========================================================= */

.resource-search {
  position: relative;
  z-index: 100;
}


/* dropdown */

.page-search-suggestions {
  position: absolute;

  left: 0;
  right: 0;
  top: calc(100% + 6px);

  display: none;

  max-height: 460px;

  overflow-y: auto;

  background: #090b0c;

  border: 1px solid rgba(255,255,255,.10);



  z-index: 9999;
}


.page-search-suggestions.is-open {
  display: block;
}


/* individual result */

.page-search-result {
  display: grid;

  grid-template-columns:
    32px 1fr 22px;

  gap: 14px;

  align-items: center;

  width: 100%;

  padding: 16px 18px;y

  border: 0;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    background .25s ease,
    padding-left .25s ease;
}


.page-search-result:last-child {
  border-bottom: 0;
}


.page-search-result:hover,
.page-search-result.is-active {
  padding-left: 23px;

  background:
    rgba(34,79,97,.18);
}


/* number */

.page-search-result-number {
  color: #658996;

  font-size: .58rem;

  letter-spacing: .08em;
}


/* text */

.page-search-result-text strong {
  display: block;

  color: rgba(255,255,255,.92);

  font-size: .78rem;

  font-weight: 400;
}


.page-search-result-text small {
  display: block;

  margin-top: 4px;

  overflow: visible;

  color: rgba(255,255,255,.36);

  font-size: .63rem;

  white-space: normal;

  text-overflow: break-word;
  text-overflow: unset;
}


/* arrow */

.page-search-result-arrow {
  color: #658996;

  opacity: 0;

  transform: translateX(-5px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.page-search-result:hover
.page-search-result-arrow,
.page-search-result.is-active
.page-search-result-arrow {

  opacity: 1;

  transform: translateX(0);
}


/* empty */

.page-search-empty {
  padding: 18px;

  color: rgba(255,255,255,.35);

  font-size: .7rem;
}


/* highlight destination */

.page-search-highlight {
  animation:
    pageSearchHighlight
    2s ease;
}


@keyframes pageSearchHighlight {

  0% {
    background:
      rgba(34,79,97,.24);

    box-shadow:
      inset 3px 0 0 #224F61;
  }

  100% {
    background: transparent;

    box-shadow:
      inset 0 0 0 transparent;
  }

}


/* mobile */

@media (max-width: 600px) {

  .page-search-result {
    padding:
      14px 15px;
  }

}


#serviceBoxes,
#serviceBoxes > *,
#serviceBoxes article,
#serviceBoxes div {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#serviceBoxes::before,
#serviceBoxes::after,
#serviceBoxes > *::before,
#serviceBoxes > *::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   SERVICE BOXES — RESPONSIVE + ANIMATION
   ========================================================= */

#serviceBoxes {
  --service-accent: #224F61;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;

  width: 100%;
  margin-top: 50px;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   GENERATED SERVICE BOXES
   --------------------------------------------------------- */

#serviceBoxes > * {
  position: relative;
  min-width: 0;

  padding: 38px 34px;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  overflow: hidden;

  /* Initial animation state */
  opacity: 0;
  transform: translateY(28px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, .61, .36, 1),
    background .4s ease;
}


/* Once visible */

#serviceBoxes.service-boxes-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* Stagger */

#serviceBoxes.service-boxes-visible > *:nth-child(1) {
  transition-delay: .05s;
}

#serviceBoxes.service-boxes-visible > *:nth-child(2) {
  transition-delay: .13s;
}

#serviceBoxes.service-boxes-visible > *:nth-child(3) {
  transition-delay: .21s;
}

#serviceBoxes.service-boxes-visible > *:nth-child(4) {
  transition-delay: .29s;
}

#serviceBoxes.service-boxes-visible > *:nth-child(5) {
  transition-delay: .37s;
}

#serviceBoxes.service-boxes-visible > *:nth-child(6) {
  transition-delay: .45s;
}


/* ---------------------------------------------------------
   OT ACCENT LINE
   --------------------------------------------------------- */

#serviceBoxes > *::after {
  content: "";
  position: absolute;

  left: 34px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--service-accent);

  transition:
    width .5s cubic-bezier(.22, .61, .36, 1),
    left .5s ease;
}


/* ---------------------------------------------------------
   SUBTLE SCAN EFFECT
   --------------------------------------------------------- */

#serviceBoxes > *::before {
  content: "";
  position: absolute;

  top: 0;
  left: -100%;

  width: 55%;
  height: 100%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 79, 97, .08),
    transparent
  );

  transform: skewX(-15deg);

  transition: left .75s ease;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#serviceBoxes > *:hover {
  transform: translateY(-6px);

  background: rgba(34, 79, 97, .06);
}

#serviceBoxes > *:hover::before {
  left: 130%;
}

#serviceBoxes > *:hover::after {
  width: calc(100% - 68px);
}


/* Headings */

#serviceBoxes h2,
#serviceBoxes h3 {
  transition:
    color .35s ease,
    transform .35s ease;
}

#serviceBoxes > *:hover h2,
#serviceBoxes > *:hover h3 {
  color: var(--service-accent);
  transform: translateX(4px);
}


/* Paragraphs */

#serviceBoxes p {
  transition:
    color .35s ease,
    transform .35s ease;
}

#serviceBoxes > *:hover p {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  #serviceBoxes {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 40px;
  }

  #serviceBoxes > * {
    padding: 32px 28px;
  }

  #serviceBoxes > *::after {
    left: 28px;
  }

  #serviceBoxes > *:hover::after {
    width: calc(100% - 56px);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #serviceBoxes {
    display: block;
    width: 100%;
    margin-top: 32px;
  }

  #serviceBoxes > * {
    width: 100%;
    padding: 28px 0;
    margin: 0;

    transform: translateY(20px);
  }

  #serviceBoxes > * + * {
    margin-top: 8px;
  }

  #serviceBoxes > *::after {
    left: 0;
  }

  #serviceBoxes > *:hover {
    transform: translateY(-3px);
  }

  #serviceBoxes > *:hover::after {
    width: 100%;
  }

}


/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #serviceBoxes > *,
  #serviceBoxes > *::before,
  #serviceBoxes > *::after,
  #serviceBoxes h2,
  #serviceBoxes h3,
  #serviceBoxes p {
    transition: none !important;
    animation: none !important;
  }

  #serviceBoxes > * {
    opacity: 1;
    transform: none;
  }

}

/* =========================================================
   SERVICE APPLICATIONS
   ========================================================= */

#serviceApplications {
  --app-accent: #224F61;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;

  width: 100%;
  margin-top: 55px;
}


/* Application cards */

#serviceApplications > * {
  position: relative;
  min-width: 0;
  min-height: 220px;

  padding: 34px 30px;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  overflow: hidden;

  opacity: 0;
  transform: translateY(28px);

  transition:
    opacity .7s ease,
    transform .65s cubic-bezier(.22, .61, .36, 1),
    background .4s ease;
}


/* Reveal */

#serviceApplications.applications-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* Stagger */

#serviceApplications.applications-visible > *:nth-child(1) {
  transition-delay: .05s;
}

#serviceApplications.applications-visible > *:nth-child(2) {
  transition-delay: .12s;
}

#serviceApplications.applications-visible > *:nth-child(3) {
  transition-delay: .19s;
}

#serviceApplications.applications-visible > *:nth-child(4) {
  transition-delay: .26s;
}

#serviceApplications.applications-visible > *:nth-child(5) {
  transition-delay: .33s;
}

#serviceApplications.applications-visible > *:nth-child(6) {
  transition-delay: .40s;
}


/* =========================================================
   ACCENT LINE
   ========================================================= */

#serviceApplications > *::after {
  content: "";
  position: absolute;

  left: 30px;
  bottom: 0;

  width: 28px;
  height: 2px;

  background: var(--app-accent);

  transition:
    width .45s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   SCAN EFFECT
   ========================================================= */

#serviceApplications > *::before {
  content: "";
  position: absolute;

  top: 0;
  left: -80%;

  width: 45%;
  height: 100%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 79, 97, .08),
    transparent
  );

  transform: skewX(-18deg);

  transition: left .75s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

#serviceApplications > *:hover {
  transform: translateY(-7px);
  background: rgba(34, 79, 97, .07);
}

#serviceApplications > *:hover::before {
  left: 130%;
}

#serviceApplications > *:hover::after {
  width: calc(100% - 60px);
}


/* Number */

#serviceApplications .feature-number {
  display: block;
  margin-bottom: 25px;

  transition:
    color .35s ease,
    transform .35s ease;
}

#serviceApplications > *:hover .feature-number {
  color: var(--app-accent);
  transform: translateX(4px);
}


/* Heading */

#serviceApplications h3 {
  transition:
    color .35s ease,
    transform .35s ease;
}

#serviceApplications > *:hover h3 {
  color: var(--app-accent);
  transform: translateX(4px);
}


/* Text */

#serviceApplications p {
  transition:
    color .35s ease,
    transform .35s ease;
}

#serviceApplications > *:hover p {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  #serviceApplications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 45px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  #serviceApplications {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 35px;
  }

  #serviceApplications > * {
    min-height: auto;
    padding: 28px 0;
  }

  #serviceApplications > *::after {
    left: 0;
  }

  #serviceApplications > *:hover {
    transform: translateY(-3px);
  }

  #serviceApplications > *:hover::after {
    width: 100%;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #serviceApplications > *,
  #serviceApplications > *::before,
  #serviceApplications > *::after,
  #serviceApplications h3,
  #serviceApplications p,
  #serviceApplications .feature-number {
    transition: none !important;
    animation: none !important;
  }

  #serviceApplications > * {
    opacity: 1;
    transform: none;
  }

}


/* =========================================================
   METCODE OT — 3D GLOBE HERO BACKGROUND
   ========================================================= */

#hero {
  position: relative;
  overflow: visible;
 
}


/* =========================================================
   ANIMATION LAYER

   Completely removed from normal document flow.
   It cannot alter the hero layout.
   ========================================================= */

#hero .hero-ot-background {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;

  z-index: 0;
}


/* THREE.JS CANVAS */

#otGlobeCanvas {
  position: absolute;

  inset: 0;

  display: block;

  width: 100% !important;
  height: 100% !important;

  pointer-events: none;
}


/* =========================================================
   KEEP EXISTING CONTENT ABOVE THE ANIMATION
   ========================================================= */

#hero > .hero-badge,
#hero > h1,
#hero > .hero-sub,
#hero > .hero-ctas,
#hero > .hero-metrics {
  position: relative;

  z-index: 5;
}


/*
Existing hero-grid can remain,
but keep it behind content.
*/

#hero > .hero-grid {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


/* =========================================================
   SUBTLE OT GRID
   ========================================================= */

.ot-background-grid {
  position: absolute;

  inset: 0;

  z-index: 1;

  opacity: .32;

  

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.6),
      rgba(0,0,0,.18)
    );

  animation:
    otGridDrift
    24s linear infinite;
}


@keyframes otGridDrift {

  to {
    background-position:
      72px 72px,
      72px 72px;
  }

}


/* =========================================================
   SCANNING LIGHT
   ========================================================= */

.ot-background-scan {
  position: absolute;

  left: 0;
  top: -20%;

  z-index: 2;

  width: 100%;
  height: 18%;

  opacity: .5;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(34,79,97,.04),
      rgba(113,151,165,.08),
      rgba(34,79,97,.04),
      transparent
    );

  filter: blur(18px);

  animation:
    otHeroScan
    9s ease-in-out infinite;
}


@keyframes otHeroScan {

  0% {
    transform:
      translateY(-120%);
  }

  50% {
    transform:
      translateY(650%);
  }

  100% {
    transform:
      translateY(-120%);
  }

}





/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .ot-background-vignette {
    background:

      linear-gradient(
        90deg,

        rgba(7,9,12,.94) 0%,

        rgba(7,9,12,.82) 48%,

        rgba(7,9,12,.38) 100%
      ),

      linear-gradient(
        to bottom,

        rgba(7,9,12,.12),

        transparent,

        rgba(7,9,12,.25)
      );
  }

}


@media (max-width: 650px) {

  /*
  On mobile the globe becomes more subtle so
  it never competes with the copy.
  */

  #otGlobeCanvas {
    opacity: .55;
  }


  .ot-background-grid {
    opacity: .18;
  }


  .ot-background-vignette {
    background:

      linear-gradient(
        to right,

        rgba(7,9,12,.91),

        rgba(7,9,12,.73)
      );
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ot-background-grid,
  .ot-background-scan {
    animation: none;
  }

}

#heroRotatingText {
  display: inline-block;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}

#heroRotatingText.text-out {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
}

#heroRotatingText.text-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.top-nav .nav-links a,
.top-nav .nav-dropdown-trigger,
.top-nav .nav-cta {
  text-transform: none !important;
  font-size: 0.75rem !important;
}

.top-nav .nav-links > li > a,
.top-nav .nav-dropdown-trigger {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* =========================================================
   FLAGSHIP SOLUTIONS
   Same visual language as the other solution sections
========================================================= */

#flagship-solutions {
  position: relative;
}


/* GROUP HEADER */

#flagship-solutions .solutions-group-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 55px;
}

#flagship-solutions .solutions-group-heading > p {
  margin: 0;
  max-width: 520px;

  font-size: 0.95rem;
  line-height: 1.8;

  color: rgba(255, 255, 255, 0.58);
}


/* SOLUTION LIST */

#flagship-solutions .solutions-list {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* INDIVIDUAL ROW */

#flagship-solutions .solution-row {
  position: relative;

  display: grid;
  grid-template-columns:
    70px
    minmax(250px, 1fr)
    minmax(300px, 1.15fr)
    36px;

  gap: 32px;
  align-items: center;

  min-height: 150px;
  padding: 32px 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  color: inherit;
  text-decoration: none;

  overflow: hidden;

  transition:
    background 0.35s ease,
    padding-left 0.35s ease;
}


/* LEFT ACCENT LINE */

#flagship-solutions .solution-row::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 2px;

  background: #224f61;

  transform: scaleY(0);
  transform-origin: bottom;

  transition: transform 0.35s ease;
}


/* SUBTLE SCAN EFFECT */

#flagship-solutions .solution-row::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;

  width: 28%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 79, 97, 0.08),
      transparent
    );

  transform: skewX(-18deg);

  pointer-events: none;
  opacity: 0;

  transition:
    left 0.7s ease,
    opacity 0.35s ease;
}


/* HOVER */

#flagship-solutions .solution-row:hover {
  padding-left: 26px;

  background:
    linear-gradient(
      90deg,
      rgba(34, 79, 97, 0.08),
      rgba(34, 79, 97, 0.025) 42%,
      transparent
    );
}

#flagship-solutions .solution-row:hover::before {
  transform: scaleY(1);
}

#flagship-solutions .solution-row:hover::after {
  left: 110%;
  opacity: 1;
}


/* NUMBER */

#flagship-solutions .solution-row-number {
  font-size: 0.72rem;
  font-weight: 500;

  letter-spacing: 0.16em;

  color: rgba(255, 255, 255, 0.32);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#flagship-solutions .solution-row:hover .solution-row-number {
  color: #224f61;
  transform: translateX(3px);
}


/* MAIN TITLE AREA */

#flagship-solutions .solution-row-main {
  position: relative;
  z-index: 2;
}


/* MODERNISE / INTEGRATE / OPTIMISE / SUPPORT */

#flagship-solutions .solution-row-kicker {
  margin: 0 0 8px;

  font-size: 0.64rem;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: #224f61;
}


/* SOLUTION TITLE */

#flagship-solutions .solution-row-main h3 {
  margin: 0;

  max-width: 470px;

  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;

  letter-spacing: -0.015em;

  color: rgba(255, 255, 255, 0.92);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#flagship-solutions .solution-row:hover .solution-row-main h3 {
  color: #ffffff;
  transform: translateX(3px);
}


/* DESCRIPTION */

#flagship-solutions .solution-row-description {
  position: relative;
  z-index: 2;

  margin: 0;

  max-width: 650px;

  font-size: 0.88rem;
  line-height: 1.7;

  color: rgba(255, 255, 255, 0.55);

  transition: color 0.3s ease;
}

#flagship-solutions .solution-row:hover .solution-row-description {
  color: rgba(255, 255, 255, 0.72);
}


/* ARROW */

#flagship-solutions .solution-row-arrow {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  font-size: 1.35rem;

  color: rgba(255, 255, 255, 0.35);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

#flagship-solutions .solution-row:hover .solution-row-arrow {
  color: #224f61;
  transform: translateX(6px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  #flagship-solutions .solutions-group-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #flagship-solutions .solutions-group-heading > p {
    max-width: 700px;
  }

  #flagship-solutions .solution-row {
    grid-template-columns:
      52px
      minmax(0, 1fr)
      32px;

    gap: 18px;
  }

  #flagship-solutions .solution-row-description {
    grid-column: 2 / 3;
    margin-top: -8px;
  }

  #flagship-solutions .solution-row-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

}


@media (max-width: 700px) {

  #flagship-solutions .solutions-group-heading {
    margin-bottom: 38px;
  }

  #flagship-solutions .solution-row {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      24px;

    gap: 12px;

    min-height: 0;
    padding: 25px 4px;
  }

  #flagship-solutions .solution-row:hover {
    padding-left: 10px;
  }

  #flagship-solutions .solution-row-number {
    font-size: 0.62rem;
  }

  #flagship-solutions .solution-row-kicker {
    font-size: 0.58rem;
  }

  #flagship-solutions .solution-row-main h3 {
    font-size: 1rem;
  }

  #flagship-solutions .solution-row-description {
    font-size: 0.8rem;
    line-height: 1.65;
  }

  #flagship-solutions .solution-row-arrow {
    font-size: 1.05rem;
  }

}
/* ============================================================
   METCODE OT — SOLUTION ARCHITECTURE FLOW
   Premium Industrial / OT Display
   ============================================================ */

.solution-flow-wrap {
  --flow-accent: #224F61;
  --flow-accent-soft: rgba(34, 79, 97, 0.16);
  --flow-accent-mid: rgba(34, 79, 97, 0.34);
  --flow-border: rgba(255, 255, 255, 0.10);
  --flow-border-strong: rgba(255, 255, 255, 0.18);
  --flow-text: rgba(255, 255, 255, 0.94);
  --flow-muted: rgba(255, 255, 255, 0.48);

  position: relative;
  margin-top: 70px;
  padding: 50px 0 18px;

  isolation: isolate;
}


/* subtle background field */
.solution-flow-wrap::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,79,97,.035) 30%,
      rgba(34,79,97,.07) 50%,
      rgba(34,79,97,.035) 70%,
      transparent
    );

  pointer-events: none;
  z-index: -2;
}


/* faint technical grid */
.solution-flow-wrap::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size: 38px 38px;

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );

  pointer-events: none;
  z-index: -1;
}


/* ============================================================
   SECTION LABEL
   ============================================================ */

.solution-flow-wrap > .section-tag {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 36px;

  font-size: .68rem;
  font-weight: 500;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: rgba(255,255,255,.52);
}


.solution-flow-wrap > .section-tag::before {
  content: "";

  width: 26px;
  height: 1px;

  background: var(--flow-accent);
}


/* ============================================================
   MAIN PROCESS
   ============================================================ */

.solution-flow-wrap .solution-process {
  position: relative;

  display: grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr)) !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid var(--flow-border);
  border-bottom: 1px solid var(--flow-border);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,.004)
    );

  overflow: hidden;
}


/* ============================================================
   MAIN SIGNAL BUS
   ============================================================ */

.solution-flow-wrap .solution-process::before {
  content: "";

  position: absolute;

  top: 39px;

  left: 6%;
  right: 6%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34,79,97,.25) 6%,
      rgba(34,79,97,.82) 18%,
      #224F61 50%,
      rgba(34,79,97,.82) 82%,
      rgba(34,79,97,.25) 94%,
      transparent
    );

  z-index: 1;
}


/* travelling process signal */
.solution-flow-wrap .solution-process::after {
  content: "";

  position: absolute;

  top: 36px;
  left: 6%;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(34,79,97,.22),
    0 0 12px rgba(255,255,255,.55),
    0 0 24px rgba(34,79,97,.9);

  z-index: 5;

  animation:
    metcodeSolutionSignal 8s linear infinite;
}


@keyframes metcodeSolutionSignal {

  0% {
    left: 6%;
    opacity: 0;
  }

  7% {
    opacity: 1;
  }

  93% {
    opacity: 1;
  }

  100% {
    left: 94%;
    opacity: 0;
  }

}


/* ============================================================
   EACH STAGE
   ============================================================ */

.solution-flow-wrap .solution-process > div {
  position: relative;

  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;

  min-width: 0;

  min-height: 190px !important;

  padding:
    84px
    24px
    30px !important;

  margin: 0 !important;

  border: 0 !important;

  border-right:
    1px solid var(--flow-border) !important;

  background: transparent !important;

  transition:
    background .45s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}


.solution-flow-wrap .solution-process > div:last-child {
  border-right: 0 !important;
}


/* subtle bottom accent */
.solution-flow-wrap .solution-process > div::after {
  content: "";

  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--flow-accent),
      transparent
    );

  transform: scaleX(0);
  transform-origin: left;

  opacity: .8;

  transition: transform .4s ease;
}


/* ============================================================
   PROCESS NODE
   ============================================================ */

.solution-flow-wrap .solution-process > div::before {
  content: "";

  position: absolute;

  top: 32px;
  left: 24px;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  background: #080b0d;

  border:
    1px solid rgba(255,255,255,.38);

  box-shadow:
    0 0 0 5px rgba(34,79,97,.08);

  z-index: 4;

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


/* ============================================================
   STEP NUMBER
   ============================================================ */

.solution-flow-wrap
.solution-process
.feature-number {

  position: absolute !important;

  top: 26px !important;
  right: 20px !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  border: 0 !important;

  font-size: .58rem !important;

  font-weight: 500;

  letter-spacing: .18em;

  color:
    rgba(255,255,255,.23) !important;
}


/* ============================================================
   TITLE
   ============================================================ */

.solution-flow-wrap
.solution-process
h3 {

  margin: 0 !important;

  max-width: 175px;

  font-size:
    clamp(.80rem, .95vw, 1rem) !important;

  line-height: 1.45 !important;

  font-weight: 500 !important;

  letter-spacing: .045em !important;

  text-transform: uppercase;

  color:
    var(--flow-text) !important;

  transition:
    color .35s ease,
    transform .35s ease;
}


/* technical indicator under title */
.solution-flow-wrap
.solution-process
h3::after {

  content: "";

  display: block;

  width: 20px;
  height: 1px;

  margin-top: 15px;

  background:
    var(--flow-accent);

  transform-origin: left;

  transition:
    width .4s ease,
    opacity .4s ease;
}


/* ============================================================
   ACTIVE STAGE
   ============================================================ */

.solution-flow-wrap
.solution-process
> div.is-active {

  background:
    linear-gradient(
      180deg,
      rgba(34,79,97,.14),
      rgba(34,79,97,.035)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transform:
    translateY(-4px);
}


/* active node */
.solution-flow-wrap
.solution-process
> div.is-active::before {

  background:
    var(--flow-accent);

  border-color:
    rgba(255,255,255,.92);

  transform:
    scale(1.2);

  box-shadow:
    0 0 0 6px rgba(34,79,97,.15),
    0 0 22px rgba(34,79,97,.75);
}


/* active bottom accent */
.solution-flow-wrap
.solution-process
> div.is-active::after {

  transform:
    scaleX(1);
}


/* active title */
.solution-flow-wrap
.solution-process
> div.is-active h3 {

  color:
    #ffffff !important;

  transform:
    translateX(3px);
}


.solution-flow-wrap
.solution-process
> div.is-active h3::after {

  width: 42px;
}


/* ============================================================
   COMPLETED STAGE
   ============================================================ */

.solution-flow-wrap
.solution-process
> div.is-complete::before {

  background:
    rgba(34,79,97,.6);

  border-color:
    rgba(34,79,97,.9);

  box-shadow:
    0 0 0 4px rgba(34,79,97,.08);
}


.solution-flow-wrap
.solution-process
> div.is-complete h3 {

  color:
    rgba(255,255,255,.68) !important;
}


/* ============================================================
   HOVER
   ============================================================ */

.solution-flow-wrap
.solution-process
> div:hover {

  background:
    linear-gradient(
      180deg,
      rgba(34,79,97,.11),
      rgba(34,79,97,.025)
    ) !important;

  transform:
    translateY(-4px);
}


.solution-flow-wrap
.solution-process
> div:hover::before {

  background:
    var(--flow-accent);

  border-color:
    rgba(255,255,255,.86);

  box-shadow:
    0 0 0 6px rgba(34,79,97,.13),
    0 0 18px rgba(34,79,97,.65);
}


.solution-flow-wrap
.solution-process
> div:hover::after {

  transform:
    scaleX(1);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

  .solution-flow-wrap .solution-process {

    grid-template-columns:
      repeat(3, 1fr) !important;

  }


  .solution-flow-wrap
  .solution-process::before,
  .solution-flow-wrap
  .solution-process::after {

    display: none;

  }


  .solution-flow-wrap
  .solution-process > div {

    min-height: 170px !important;

    border-bottom:
      1px solid var(--flow-border) !important;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .solution-flow-wrap {

    margin-top: 45px !important;

    padding-top: 24px;

  }


  .solution-flow-wrap
  .solution-process {

    display: block !important;

    border-top: 0;
    border-bottom: 0;

    background: transparent;

  }


  .solution-flow-wrap
  .solution-process > div {

    position: relative;

    display: block !important;

    min-height: 0 !important;

    padding:
      15px
      10px
      38px
      60px !important;

    border: 0 !important;

    transform: none !important;

  }


  /* vertical system bus */
  .solution-flow-wrap
  .solution-process > div::after {

    left: 22px;
    right: auto;

    top: 31px;
    bottom: auto;

    width: 1px;
    height: calc(100% - 4px);

    transform: none !important;

    background:
      linear-gradient(
        to bottom,
        var(--flow-accent),
        rgba(34,79,97,.10)
      );

  }


  .solution-flow-wrap
  .solution-process > div:last-child::after {

    display: none;

  }


  .solution-flow-wrap
  .solution-process > div::before {

    top: 18px;
    left: 16px;

  }


  .solution-flow-wrap
  .solution-process
  .feature-number {

    position: static !important;

    display: block;

    margin-bottom: 8px !important;

  }


  .solution-flow-wrap
  .solution-process h3 {

    max-width: none;

    font-size: .88rem !important;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .solution-flow-wrap
  .solution-process::after {

    animation: none;
    display: none;

  }


  .solution-flow-wrap
  .solution-process > div,
  .solution-flow-wrap
  .solution-process > div::before,
  .solution-flow-wrap
  .solution-process > div::after,
  .solution-flow-wrap
  .solution-process h3 {

    transition: none;

  }

}

/* ============================================================
   METCODE OT — DELIVERY APPROACH
   Requirement → Handover Timeline
   ============================================================ */

.delivery-approach {
  --da-accent: #224F61;
  --da-border: rgba(255,255,255,.11);
  --da-muted: rgba(255,255,255,.38);

  position: relative;
  overflow: hidden;
  padding-top: 110px;
  padding-bottom: 110px;
}


/* subtle technical background */
.delivery-approach::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(34,79,97,.08),
      transparent 42%
    );

  pointer-events: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.delivery-approach > .section-tag,
.delivery-approach > .section-title {
  position: relative;
  z-index: 2;
}


.delivery-approach > .section-tag {
  margin-bottom: 15px;
}


.delivery-approach > .section-title {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;

  line-height: 1.12;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.delivery-approach .solution-process {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;

  max-width: 1050px;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: 0 !important;

  background: transparent !important;
  border: 0 !important;
}


/* inactive timeline */
.delivery-approach .solution-process::before {
  content: "";

  position: absolute;

  top: 31px;
  left: 12.5%;
  right: 12.5%;

  height: 1px;

  background: rgba(255,255,255,.13);

  z-index: 0;
}


/* active progress line */
.delivery-approach .solution-process::after {
  content: "";

  position: absolute;

  top: 31px;
  left: 12.5%;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,.5),
      #224F61,
      rgba(255,255,255,.65)
    );

  box-shadow:
    0 0 12px rgba(34,79,97,.5);

  z-index: 1;

  transition:
    width 1s cubic-bezier(.2,.8,.2,1);
}


/* JS-controlled progression */
.delivery-approach .solution-process[data-stage="1"]::after {
  width: 0;
}

.delivery-approach .solution-process[data-stage="2"]::after {
  width: 25%;
}

.delivery-approach .solution-process[data-stage="3"]::after {
  width: 50%;
}

.delivery-approach .solution-process[data-stage="4"]::after {
  width: 75%;
}


/* ============================================================
   INDIVIDUAL STAGE
   ============================================================ */

.delivery-approach .solution-process > div {
  position: relative;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 150px !important;

  margin: 0 !important;
  padding: 0 20px !important;

  border: 0 !important;

  background: transparent !important;

  text-align: center;

  transform: none !important;
}


/* node */
.delivery-approach .solution-process > div::before {
  content: "";

  position: absolute;

  top: 24px;
  left: 50%;

  width: 15px;
  height: 15px;

  transform: translateX(-50%);

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.32);

  background: #090b0c;

  box-shadow:
    0 0 0 6px #090b0c;

  z-index: 3;

  transition:
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    transform .4s ease;
}


/* disable inherited pseudo styling */
.delivery-approach .solution-process > div::after {
  display: none !important;
}


/* ============================================================
   NUMBER
   ============================================================ */

.delivery-approach
.solution-process
.feature-number {

  position: static !important;

  display: block !important;

  width: auto !important;
  height: auto !important;

  margin: 0 0 59px !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  font-size: .6rem !important;
  font-weight: 500;

  line-height: 1;

  letter-spacing: .17em;

  color: var(--da-muted) !important;
}


/* ============================================================
   STAGE NAME
   ============================================================ */

.delivery-approach .solution-process h3 {
  margin: 0 !important;

  font-size: clamp(.95rem, 1.2vw, 1.12rem) !important;
  line-height: 1.3 !important;

  font-weight: 500 !important;

  letter-spacing: .025em !important;
  text-transform: none;

  color: rgba(255,255,255,.48) !important;

  transition:
    color .4s ease,
    transform .4s ease;
}


/* remove architecture-flow underline */
.delivery-approach .solution-process h3::after {
  display: none !important;
}


/* ============================================================
   ACTIVE STAGE
   ============================================================ */

.delivery-approach
.solution-process > div.is-active::before {

  background: var(--da-accent);

  border-color: rgba(255,255,255,.9);

  transform:
    translateX(-50%)
    scale(1.2);

  box-shadow:
    0 0 0 7px rgba(34,79,97,.13),
    0 0 24px rgba(34,79,97,.75);
}


.delivery-approach
.solution-process > div.is-active h3 {

  color: #fff !important;

  transform: translateY(-2px);
}


.delivery-approach
.solution-process > div.is-active
.feature-number {

  color: rgba(255,255,255,.75) !important;
}


/* ============================================================
   COMPLETED STAGE
   ============================================================ */

.delivery-approach
.solution-process > div.is-complete::before {

  background: var(--da-accent);

  border-color: var(--da-accent);

  box-shadow:
    0 0 0 5px rgba(34,79,97,.08);
}


.delivery-approach
.solution-process > div.is-complete h3 {

  color: rgba(255,255,255,.72) !important;
}


/* ============================================================
   HOVER
   ============================================================ */

.delivery-approach
.solution-process > div:hover h3 {

  color: #fff !important;
}


.delivery-approach
.solution-process > div:hover::before {

  border-color: #224F61;

  box-shadow:
    0 0 0 6px rgba(34,79,97,.12),
    0 0 16px rgba(34,79,97,.5);
}


/* ============================================================
   MOBILE
   Vertical project timeline
   ============================================================ */

@media (max-width: 700px) {

  .delivery-approach {
    padding-top: 75px;
    padding-bottom: 75px;
  }


  .delivery-approach > .section-title {
    margin-bottom: 45px;
  }


  .delivery-approach .solution-process {
    display: block !important;

    max-width: 420px;

    padding-left: 0 !important;
  }


  .delivery-approach .solution-process::before {
    top: 12px;
    bottom: 12px;

    left: 25px;
    right: auto;

    width: 1px;
    height: auto;
  }


  .delivery-approach .solution-process::after {
    top: 12px;
    left: 25px;

    width: 1px !important;
    height: 0;

    transition:
      height 1s cubic-bezier(.2,.8,.2,1);
  }


  .delivery-approach
  .solution-process[data-stage="1"]::after {
    height: 0;
  }

  .delivery-approach
  .solution-process[data-stage="2"]::after {
    height: 25%;
  }

  .delivery-approach
  .solution-process[data-stage="3"]::after {
    height: 50%;
  }

  .delivery-approach
  .solution-process[data-stage="4"]::after {
    height: 75%;
  }


  .delivery-approach
  .solution-process > div {

    display: grid !important;

    grid-template-columns: 52px 42px 1fr;

    align-items: center;

    min-height: 86px !important;

    padding: 0 !important;

    text-align: left;
  }


  .delivery-approach
  .solution-process > div::before {

    top: 50%;
    left: 25px;

    transform:
      translate(-50%, -50%);
  }


  .delivery-approach
  .solution-process > div.is-active::before {

    transform:
      translate(-50%, -50%)
      scale(1.2);
  }


  .delivery-approach
  .solution-process
  .feature-number {

    grid-column: 2;

    margin: 0 !important;
  }


  .delivery-approach
  .solution-process h3 {

    grid-column: 3;

    text-align: left;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .delivery-approach
  .solution-process::after,

  .delivery-approach
  .solution-process > div::before,

  .delivery-approach
  .solution-process h3 {

    transition: none;
  }

}

/* ============================================================
   METCODE OT — SCROLL SLIDE-IN LISTS
   ============================================================ */

/* LEFT PANEL — slide from left */
.solution-dual .solution-box:first-child .pricing-features li {
  opacity: 0;
  transform: translateX(-232px);
  filter: blur(3px);

  transition:
    opacity .55s ease,
    transform 3.65s cubic-bezier(.16, 1, .3, 1),
    filter .5s ease;
}


/* RIGHT PANEL — slide from right */
.solution-dual .solution-box:nth-child(2) .pricing-features li {
  opacity: 0;
  transform: translateX(32px);
  filter: blur(3px);

  transition:
    opacity .55s ease,
    transform 3.65s cubic-bezier(.16, 1, .3, 1),
    filter .5s ease;
}


/* VISIBLE STATE */
.solution-dual .pricing-features li.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0) !important;
}


/* Slight accent as item enters */
.solution-dual .pricing-features li.is-visible::before {
  transition:
    color 3.45s ease,
    opacity 3.45s ease;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .solution-dual .pricing-features li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

}

/* ============================================================
   LIST ITEM HOVER — ENLARGE INDIVIDUALLY
   ============================================================ */

.solution-dual .pricing-features li {
  position: relative;
  z-index: 1;

  transform-origin: center left;

  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.16, 1, .3, 1),
    filter .5s ease,
    background .3s ease,
    color .3s ease;
}


/* LEFT PANEL */
.solution-dual
.solution-box:first-child
.pricing-features li:hover {

  transform: scale(1.50) !important;

  z-index: 20;

  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(34,79,97,.18),
      rgba(34,79,97,.04) 75%,
      transparent
    );
}


/* RIGHT PANEL */
.solution-dual
.solution-box:nth-child(2)
.pricing-features li {

  transform-origin: center right;
}


.solution-dual
.solution-box:nth-child(2)
.pricing-features li:hover {

  transform: scale(1.50) !important;

  z-index: 10;

  color: #fff;

  background:
    linear-gradient(
      270deg,
      rgba(34,79,97,.18),
      rgba(34,79,97,.04) 75%,
      transparent
    );
}

/* ============================================================
   METCODE OT — ONE OT PARTNER
   ============================================================ */

.one-ot-partner {
  position: relative;
  overflow: hidden;
  padding-top: 130px;
  padding-bottom: 120px;

  background:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size: 46px 46px;
}


/* subtle technical glow */
.one-ot-partner::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;

  top: 35%;
  left: 50%;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(34,79,97,.15);
  border-radius: 50%;

  pointer-events: none;
}


/* ============================================================
   INTRO
   ============================================================ */

.one-ot-partner__intro {
  max-width: 820px;
  margin: 0 auto 90px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.one-ot-partner__lead {
  max-width: 680px;
  margin: 26px auto 0;

  font-size: 1.05rem;
  line-height: 1.8;

  color: rgba(255,255,255,.58);
}


/* ============================================================
   STACK
   ============================================================ */

.ot-stack {
  position: relative;

  max-width: 1500px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}


/* main signal line */
.ot-stack::before {
  content: "";
  position: absolute;

  top: 57px;
  left: 8.33%;
  right: 8.33%;

  height: 1px;

  background: rgba(255,255,255,.11);

  z-index: 0;
}


/* travelling signal */
.ot-stack::after {
  content: "";
  position: absolute;

  top: 54px;
  left: 8%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #224F61;

  box-shadow:
    0 0 8px rgba(34,79,97,.9),
    0 0 20px rgba(34,79,97,.65),
    0 0 36px rgba(34,79,97,.35);

  animation: otSignalTravel 10.2s linear infinite;

  z-index: 3;
}

@keyframes otSignalTravel {
  0% {
    left: 8%;
  }

  100% {
    left: 91%;
  }
}


/* ============================================================
   STAGE
   ============================================================ */

.ot-stage {
  position: relative;
  min-height: 340px;

  padding: 95px 22px 34px;

  border-right: 1px solid rgba(255,255,255,.08);

  transition:
    background .45s ease,
    transform .45s cubic-bezier(.16,1,.3,1);
}

.ot-stage:last-child {
  border-right: none;
}

.ot-stage:hover,
.ot-stage.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(34,79,97,.13),
      rgba(34,79,97,.025)
    );
}


/* stage number */

.ot-stage__number {
  position: absolute;

  top: 17px;
  right: 18px;

  font-size: .68rem;
  letter-spacing: .18em;

  color: rgba(255,255,255,.3);
}


/* node */

.ot-stage__node {
  position: absolute;

  top: 49px;
  left: 50%;

  width: 16px;
  height: 16px;

  transform: translateX(-50%);

  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;

  background: #0a0c0e;

  transition:
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.ot-stage.is-active .ot-stage__node,
.ot-stage:hover .ot-stage__node {
  border-color: #224F61;
  background: #224F61;

  box-shadow:
    0 0 0 6px rgba(34,79,97,.11),
    0 0 18px rgba(34,79,97,.55);
}


/* ============================================================
   CONTENT
   ============================================================ */

.ot-stage__content {
  position: relative;
  z-index: 2;
}

.ot-stage__kicker {
  display: block;

  margin-bottom: 14px;

  color: #224F61;

  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ot-stage h3 {
  margin: 0 0 14px;

  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;

  color: #fff;
}

.ot-stage p {
  margin: 0;

  min-height: 64px;

  font-size: .76rem;
  line-height: 1.7;

  color: rgba(255,255,255,.45);
}


/* ============================================================
   EXPANDED CAPABILITIES
   ============================================================ */

.ot-stage__detail {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 28px;

  opacity: .18;

  transform: translateY(8px);

  transition:
    opacity .4s ease,
    transform .4s cubic-bezier(.16,1,.3,1);
}

.ot-stage:hover .ot-stage__detail,
.ot-stage.is-active .ot-stage__detail {
  opacity: 1;
  transform: translateY(0);
}

.ot-stage__detail span {
  position: relative;

  padding-left: 13px;

  font-size: .69rem;

  color: rgba(255,255,255,.55);
}

.ot-stage__detail span::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 4px;
  height: 4px;

  transform: translateY(-50%);

  background: #224F61;
}


/* ============================================================
   FOOTER
   ============================================================ */

.one-ot-partner__footer {
  max-width: 1500px;

  margin: 48px auto 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 40px;
}

.one-ot-partner__footer p {
  margin: 0;

  font-size: 1rem;

  color: rgba(255,255,255,.55);
}

.one-ot-partner__footer strong {
  color: #fff;
  font-weight: 500;
}

.one-ot-partner__links {
  display: flex;
  gap: 32px;
}

.one-ot-partner__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  font-size: .76rem;
  letter-spacing: .06em;

  color: rgba(255,255,255,.65);

  text-decoration: none;

  transition:
    color .3s ease,
    gap .3s ease;
}

.one-ot-partner__links a span {
  color: #224F61;
}

.one-ot-partner__links a:hover {
  color: #fff;
  gap: 14px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1180px) {

  .ot-stack {
    grid-template-columns: repeat(3, 1fr);
  }

  .ot-stack::before,
  .ot-stack::after {
    display: none;
  }

  .ot-stage {
    min-height: 310px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .ot-stage:nth-child(3n) {
    border-right: none;
  }

  .ot-stage:nth-last-child(-n+3) {
    border-bottom: none;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .one-ot-partner {
    padding-top: 90px;
    padding-bottom: 80px;
  }

  .one-ot-partner__intro {
    text-align: left;
    margin-bottom: 55px;
  }

  .one-ot-partner__lead {
    margin-left: 0;
  }


  .ot-stack {
    display: block;

    border-top: 1px solid rgba(255,255,255,.1);
  }

  .ot-stage {
    min-height: unset;

    padding:
      72px
      18px
      38px
      58px;

    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .ot-stage:last-child {
    border-bottom: none;
  }


  /* vertical architecture line */

  .ot-stage::before {
    content: "";

    position: absolute;

    left: 24px;
    top: 0;
    bottom: 0;

    width: 1px;

    background: rgba(255,255,255,.1);
  }

  .ot-stage__node {
    top: 45px;
    left: 24px;
  }

  .ot-stage__number {
    top: 22px;
  }


  .ot-stage p {
    min-height: unset;
  }


  .ot-stage__detail {
    opacity: 1;
    transform: none;
  }


  .one-ot-partner__footer {
    flex-direction: column;
    align-items: flex-start;

    margin-top: 38px;
  }

  .one-ot-partner__links {
    flex-direction: column;
    gap: 15px;
  }

}

.nav-alternating-item {
  min-width: 105px;
}

#alternatingNavText {
  display: inline-block;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#alternatingNavText.nav-switching {
  opacity: 0;
  transform: translateY(-6px);
}



/* METCODE OT — APPLICATION MODAL */

.application-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 5;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.application-modal.active {
    opacity: 1;
    visibility: visible;
}

.application-modal-content {
    position: relative;
    width: 100%;
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
    background: #080808;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 55px 45px;
    transform: translateY(25px);
    transition: transform .35s ease;
}

.application-modal.active .application-modal-content {
    transform: translateY(0);
}

.application-modal-content h2 {
    color: #fff;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 600;
    margin: 0 0 24px;
    line-height: 1.2;
}

.application-modal-content p {
    color: #fff;
    font-size: 15px;
    line-height: 1.9;
    margin: 0 0 18px;
}

.application-modal-content p:last-child {
    margin-bottom: 0;
}

.application-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    transition: opacity .2s ease;
}

.application-modal-close:hover {
    opacity: .6;
}

@media (max-width: 600px) {
    .application-modal-content {
        padding: 55px 25px 35px;
    }
}


/* ENGINEERING FORM SUBMISSION STATUS */

.engineering-submit-status {
    display: none;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 12px 0;
    animation: submittingPulse 1.5s ease-in-out infinite;
}

.engineering-submit-status.active {
    display: block;
}

.engineering-form button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@keyframes submittingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .engineering-submit-status {
        animation: none;
    }
}



/* =========================================
   QUOTE & PROPOSAL SUBMISSION STATUS
   ========================================= */

.request-submit-status {
    display: none;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 12px 0;
    animation: requestSubmittingPulse 1.5s ease-in-out infinite;
}

.request-submit-status.active {
    display: block;
}

.request-form-mode button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@keyframes requestSubmittingPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .request-submit-status {
        animation: none;
    }
}