:root {
  --primary: #ff4d5e;
  --secondary: #00f5d4;
  --red: var(--primary);
  --cyan: var(--secondary);
  --gold: var(--secondary);
  --purple: var(--secondary);
  --green: var(--secondary);
}

html {
  scroll-padding-top: 96px;
}

body {
  overflow-x: hidden;
}

body.loaded #loader.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ll {
  display: block;
}

.loader-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

#loader {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(0,245,212,.13), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(255,77,94,.12), transparent 30%),
    #030309 !important;
  background-size: 100% 7px, auto, auto, auto;
}

#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,245,212,.16), transparent);
  transform: translateX(-100%);
  animation: loader-scan 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}

@keyframes loader-scan {
  to { transform: translateX(100%); }
}

#mainnav,
.mob-nav,
.sec > .inner,
#closing .closing-inner,
.blog-shell,
.blog-reader,
.blog-card {
  border-color: rgba(255, 255, 255, .12) !important;
}

main {
  scroll-snap-type: y proximity;
}

.sec,
#closing {
  scroll-snap-align: start;
  scroll-margin-top: 96px;
  padding-inline: 20px;
}

.sec > .inner,
#closing .closing-inner {
  max-width: 1180px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 77, 94, .08), transparent 32%),
    radial-gradient(circle at 88% 16%, rgba(0, 245, 212, .08), transparent 34%),
    rgba(8, 10, 18, .72);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
  overflow: visible;
}

.sec-eye,
.sc-label,
.res-label,
.scan-label,
.blog-kicker,
.blog-cat,
.lk,
.n-status-dot,
.vh-sound-dot,
.snap-role-dot,
.sc-live-dot {
  color: var(--secondary) !important;
}

.n-logo-mark,
.n-cta,
.vh-cta-primary,
.res-btn,
.cta-magnetic {
  background: var(--primary) !important;
  color: #fff !important;
}

.n-status-pill,
.live-badge {
  color: rgba(244,244,255,.86) !important;
  border-color: rgba(255,77,94,.38) !important;
}

.n-status-dot,
.vh-sound-dot,
.snap-role-dot {
  background: var(--secondary) !important;
  box-shadow: 0 0 0 3px rgba(0,245,212,.2), 0 0 10px rgba(0,245,212,.6) !important;
  animation: statusPulseCyan 1.8s ease-in-out infinite !important;
}

@keyframes statusPulseCyan {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,245,212,.2), 0 0 10px rgba(0,245,212,.6); }
  50%       { box-shadow: 0 0 0 6px rgba(0,245,212,.04), 0 0 16px rgba(0,245,212,.9); }
}

.live-dot,
.sc-live-dot {
  background: var(--secondary) !important;
  box-shadow: 0 0 14px rgba(0,245,212,.45) !important;
}

.vh-role-pill,
.vh-area-pill,
.h-eyebrow-pill,
.snap-chip,
.tech-tag,
.hiw-tag,
.blog-filters button.active {
  border-color: rgba(0, 245, 212, .28) !important;
  color: var(--secondary) !important;
  background: rgba(0, 245, 212, .08) !important;
}

.vh-pill-coral,
.vh-pill-amber,
.vh-pill-purple,
.vh-pill-green,
.sc-ops-red,
.sc-ops-green {
  color: var(--secondary) !important;
  border-color: rgba(0, 245, 212, .28) !important;
  background: rgba(0, 245, 212, .08) !important;
}

.sc-dot,
.sc-pipe-dot,
.sc-progress-fill,
.sc-poll-fill,
.mc-top,
.area-icon,
.cs-expand {
  background: var(--secondary) !important;
  color: #04100f !important;
}

.showcase-card:hover,
.cs-card:hover,
.area-card:hover,
.pc:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(0, 245, 212, .12), 0 18px 70px rgba(0, 0, 0, .38);
}

.sc-pipeline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-pipe-fragment {
  display: contents;
}

.sc-pipe-arrow {
  flex: 0 0 22px;
  min-width: 22px;
}

.snap-section-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 8px 0 14px;
}

.snap-location-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.snap-location-list div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
}

.snap-location-list span {
  color: var(--secondary);
  font-family: var(--mono);
  font-size: 12px;
}

.snap-row-v a {
  color: var(--secondary);
  text-decoration: none;
}

.pc .pi {
  color: var(--secondary);
}

.vh-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.vh-gradient-left {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 68% !important;
  background: linear-gradient(90deg, #060610 0%, rgba(6,6,16,.92) 28%, rgba(6,6,16,.50) 52%, rgba(6,6,16,.08) 78%, transparent 100%) !important;
}

.vh-gradient-bottom {
  background: linear-gradient(0deg, #060610 0%, rgba(6,6,16,.82) 22%, rgba(6,6,16,.35) 60%, transparent 100%) !important;
}

.vh-gradient-top {
  background: linear-gradient(180deg, rgba(6,6,16,.88) 0%, rgba(6,6,16,.44) 52%, transparent 100%) !important;
}

#video-hero {
  isolation: isolate !important;
  z-index: 1 !important;
  background: #060610 !important;
}

#vh-video {
  display: block !important;
  right: 0 !important;
  top: 0 !important;
  width: min(70vw, 1080px) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: saturate(1.06) contrast(1.04) brightness(.92) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, #000 21%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, #000 21%, #000 100%) !important;
  z-index: 2 !important;
}

#vh-video-bg {
  display: block !important;
  opacity: .92 !important;
  visibility: visible !important;
  z-index: 0 !important;
}

#cinematic-canvas {
  z-index: 3 !important;
  opacity: .72 !important;
}

.vh-gradient {
  z-index: 4 !important;
}

.vh-left,
.vh-controls,
.vh-sound-hint,
.vh-scroll-indicator {
  z-index: 5 !important;
}

.cs-card .cs-body {
  display: block;
  animation: slideDown .3s ease;
}

.cs-hdr {
  cursor: pointer;
  user-select: none;
}

.cs-click-hint svg,
.cs-expand svg {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.cs-card.open .cs-click-hint svg,
.cs-card.open .cs-expand svg {
  transform: rotate(180deg);
}

.cs-card.open .cs-expand {
  border-color: rgba(255,77,94,.6);
  background: rgba(255,77,94,.15);
  color: var(--primary);
}

.cs-card.open .cs-click-hint {
  color: var(--primary);
}

.blogs-legacy-page {
  min-height: 100vh;
}

.n-links a[aria-current="page"],
.mob-nav a[aria-current="page"] {
  color: var(--secondary) !important;
}

.featured-card {
  width: 100%;
  text-align: left;
  color: inherit;
}

.featured-visual svg,
.bc-img svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.filter-btn.active,
.featured-cat,
.bc-cat,
.o-cat {
  background: var(--primary) !important;
}

.filter-btn {
  color: var(--text) !important;
  min-width: 50px;
}

.filter-btn.active {
  color: #fff !important;
}

.overlay.open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(6,6,16,.96), rgba(3,3,9,1)) !important;
  border-top-color: rgba(255,255,255,.18) !important;
}

.foot-logo {
  color: rgba(255,255,255,.96) !important;
}

.foot-copy {
  color: rgba(244,244,255,.72) !important;
}

.foot-links a {
  color: rgba(244,244,255,.78) !important;
}

.foot-links a:hover {
  color: #fff !important;
}

@media (max-width: 1024px) {
  main {
    scroll-snap-type: none;
  }

  .sec,
  #closing {
    padding-inline: 16px;
  }

  .sec > .inner,
  #closing .closing-inner {
    border-radius: 22px;
    padding-inline: clamp(18px, 4vw, 32px);
  }

  .showcase-card,
  .snap-grid,
  .hiw-grid {
    grid-template-columns: 1fr !important;
  }

  .sc-pipeline {
    flex-direction: column;
    align-items: stretch;
  }

  .sc-pipe-arrow {
    width: 2px;
    min-height: 18px;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  #mainnav {
    max-width: 100vw;
  }

  .n-status-pill,
  .n-links {
    display: none !important;
  }

  .mob-nav.open {
    display: flex;
  }

  #video-hero,
  .vh-left {
    overflow: hidden;
  }

  .vh-left {
    width: calc(100vw - 72px) !important;
    max-width: calc(100vw - 72px) !important;
    left: 24px !important;
    right: auto !important;
  }

  .vh-role-pills,
  .vh-area-pills,
  .vh-ctas,
  .vh-socials {
    max-width: calc(100vw - 72px) !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  .vh-role-pills,
  .vh-area-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .vh-role-pills::-webkit-scrollbar,
  .vh-area-pills::-webkit-scrollbar {
    display: none;
  }

  .vh-role-pill,
  .vh-area-pill {
    flex: 0 0 auto !important;
  }

  .vh-role-pill {
    font-size: 9px !important;
    padding: 8px 10px !important;
  }

  .vh-area-pill {
    font-size: 8px !important;
    padding: 7px 10px !important;
  }

  .vh-description,
  .vh-subhead,
  .vh-subtitle,
  .vh-headline {
    max-width: calc(100vw - 72px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .vh-social-btn,
  .vh-cta {
    min-width: 0 !important;
  }

  .vh-social-btn {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  .metrics-grid,
  .areas-grid,
  .resume-grid,
  .plat-row,
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  .plat-row {
    display: grid !important;
    gap: 12px !important;
  }

  .showcase-demo {
    max-width: 100%;
    overflow: hidden;
  }

  #vh-video {
    width: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, #000 44%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, #000 44%, #000 100%) !important;
  }

  .vh-gradient-left {
    right: 0 !important;
    width: 100% !important;
    background: linear-gradient(90deg, rgba(6,6,16,.96) 0%, rgba(6,6,16,.74) 52%, rgba(6,6,16,.28) 100%) !important;
  }

  .featured-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .page-header,
  .featured-wrap,
  .blog-main {
    padding-inline: 18px !important;
  }

  .ph-filters {
    flex-wrap: wrap !important;
  }

  .sc-phone,
  .sc-tv,
  .sc-pipeline-wrap {
    transform: none !important;
  }
}

@media (max-width: 360px) {
  .vh-headline {
    font-size: clamp(42px, 14vw, 56px) !important;
  }

  .vh-cta,
  .vh-social-btn {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

.section-card > .inner,
#closing.section-card .closing-inner {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.section-card.sec {
  padding-inline: 0 !important;
  scroll-snap-align: none !important;
}

#closing.section-card {
  pointer-events: auto !important;
  position: relative !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: 1240px !important;
  min-height: min(820px, calc(100vh - 112px)) !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding-inline: 0 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(14,14,34,0.92) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
  overflow: hidden !important;
  transform-origin: top center !important;
  scroll-margin-top: 104px !important;
  will-change: transform, opacity, filter !important;
}

#closing.section-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,77,94,0.18), transparent 34%),
    radial-gradient(circle at 82% 10%, rgba(0,245,212,0.14), transparent 36%) !important;
  opacity: .88 !important;
  z-index: 0 !important;
}

#closing.section-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18%, transparent 80%, rgba(0,0,0,0.24)) !important;
  z-index: 0 !important;
}

#showcase.section-card {
  overflow: visible;
}

.stacked-home-sections {
  scroll-snap-type: none !important;
  overflow: visible !important;
  padding-bottom: 28vh !important;
}

.sticky-card-stage:last-child {
  min-height: auto !important;
  padding-bottom: 12vh !important;
}

.section-card .sc-ops-green {
  color: var(--secondary) !important;
  border-color: rgba(0, 245, 212, .28) !important;
  background: rgba(0, 245, 212, .08) !important;
}

@media (max-width: 900px) {
  #closing.section-card {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .stacked-home-sections {
    padding-bottom: 24px !important;
  }

  .sticky-card-stage:last-child {
    padding-bottom: 0 !important;
  }
}