:root {
      --bg: #0f0f10;
      --panel: #181818;
      --panel-2: #202020;
      --text: rgba(246, 242, 248, .92);
      --muted: rgba(246, 242, 248, .58);
      --faint: rgba(246, 242, 248, .36);
      --line: rgba(255,255,255,.14);
      --line-soft: rgba(255,255,255,.08);
      --purple: #dba4ff;
      --violet: #6f4cff;
      --orange: #ff8a48;
      --pink: #ff5a93;
      --soft: #f4eff7;
      --dark: #101010;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 6% 5%, rgba(111,76,255,.30), transparent 34%),
        radial-gradient(circle at 96% 8%, rgba(219,164,255,.22), transparent 28%),
        linear-gradient(180deg, #0c0c0d 0%, #151515 42%, #0d0d0e 100%);
      font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
      font-weight: 300;
      letter-spacing: -.045em;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.7'/%3E%3C/svg%3E");
      mix-blend-mode: screen;
    }

    a { color: inherit; text-decoration: none; }
    h1, h2, h3, p { margin: 0; font-weight: 300; }
    p {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.34;
      letter-spacing: -.035em;
    }

    .inner {
      width: min(1180px, calc(100vw - 42px));
      margin: 0 auto;
    }

.top-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(15,15,16,.12), transparent 16%, transparent 86%, rgba(15,15,16,.18)),
        linear-gradient(180deg, transparent 0 72%, #111 100%);
      pointer-events: none;
    }

    .nav {
      position: relative;
      z-index: 2;
      padding: 34px 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.48);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 17px;
      letter-spacing: -.04em;
      color: rgba(255,255,255,.86);
    }

    .brand-logo {
      width: 44px;
      height: auto;
      display: block;
      filter: drop-shadow(0 12px 30px rgba(82,54,255,.28));
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: 12px;
      color: rgba(255,255,255,.76);
    }

    .nav-links .hire-us-btn {
      margin-left: 12px;
      padding: 8px 20px;
      border: 1.5px solid rgba(255,255,255,0.85);
      border-radius: 4px;
      color: rgba(255,255,255,0.92) !important;
      font-weight: 500;
      letter-spacing: .06em;
      background: transparent;
      transition: background 0.2s, color 0.2s;
    }

    .nav-links .hire-us-btn:hover {
      background: rgba(255,255,255,0.10);
    }

    .btn {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.90);
      padding: 0 16px;
      font-size: 13px;
      letter-spacing: -.02em;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform .25s ease, background .25s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.14);
    }

    .btn.dark {
      background: #111;
      border-color: rgba(255,255,255,.18);
      color: white;
      box-shadow: 0 18px 40px rgba(0,0,0,.24);
    }

    .btn.purple {
      background: var(--purple);
      color: #151015;
      border-color: transparent;
    }

    .hero {
      position: relative;
      z-index: 2;
      padding: 86px 0 64px;
      display: grid;
      grid-template-columns: .94fr 1.06fr;
      gap: 64px;
      align-items: start;
    }

    .hero-right {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
      padding-top: 12px;
    }

.hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: none;
      z-index: 2;
    }

.hero-media-label {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 10px;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      color: rgba(255,255,255,.42);
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: 10px;
      pointer-events: none;
    }

    .hero-copy {
      width: min(360px, 100%);
      max-width: 360px;
      align-self: flex-end;
      margin: -4px 12px 0 0;
      color: rgba(255,255,255,.74);
      font-size: 20px;
      line-height: 1.26;
      letter-spacing: -.048em;
      text-align: left;
    }



    .hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding-top: 32px;
    }

    .hero-support {
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 148px;
    }

    .hero-support-kicker {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 11px;
      color: rgba(255,255,255,.58);
    }

    .hero-support-kicker::before {
      content: "";
      width: 54px;
      height: 1px;
      background: rgba(255,255,255,.34);
    }

    .hero-support p {
      margin: 0;
      color: rgba(255,255,255,.72);
      font-size: 17px;
      line-height: 1.42;
      letter-spacing: -.03em;
      max-width: 340px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 2px;
    }

    .hero-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.92);
      font-family: "Geist Mono", monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .hero-btn:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.36);
      transform: translateY(-1px);
    }


    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 12px;
      color: rgba(255,255,255,.74);
    }

    .eyebrow::after {
      content: "";
      width: 42px;
      height: 1px;
      background: currentColor;
      opacity: .58;
    }

    h1 {
      font-size: clamp(72px, 9vw, 132px);
      line-height: .84;
      letter-spacing: -.086em;
      color: rgba(246,242,248,.88);
      max-width: 760px;
      margin: 0;
    }

    .hero-copy {
      max-width: 350px;
      color: rgba(255,255,255,.74);
      font-size: 20px;
      line-height: 1.26;
      letter-spacing: -.048em;
      margin-bottom: 8px;
    }

    

    

    

    

    

    .orb {
      width: 118px;
      height: 118px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 34% 34%, #ffbf61, transparent 28%),
        radial-gradient(circle at 62% 55%, #6f4cff, transparent 34%),
        linear-gradient(135deg, #ff8a48, #dba4ff 44%, #4f39ff);
      filter: blur(.2px);
      position: relative;
      z-index: 2;
      box-shadow: 0 0 48px rgba(219,164,255,.32);
      animation: soft-float 6s ease-in-out infinite;
    }

    @keyframes soft-float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }

    .wire {
      position: absolute;
      width: 300px;
      height: 220px;
      border: 1px solid rgba(255,255,255,.58);
      transform: skewY(-10deg) rotate(-8deg);
      opacity: .92;
    }

    .wire::before,
    .wire::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(22deg, transparent 49.5%, rgba(255,255,255,.55) 50%, transparent 50.5%),
        linear-gradient(146deg, transparent 49.5%, rgba(255,255,255,.55) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.34) 50%, transparent 50.5%);
    }

    .wire::after {
      transform: translate(34px, 24px) scale(.74);
      border: 1px solid rgba(255,255,255,.55);
    }

    .pin-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      position: absolute;
      z-index: 3;
      box-shadow: 0 0 18px rgba(255,255,255,.42);
    }

    .section {
      padding: 84px 0;
      background: #141414;
    }

    .section-alt {
      background: #101010;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section-head h2 {
      font-size: clamp(46px, 6vw, 86px);
      line-height: .88;
      letter-spacing: -.078em;
      color: rgba(246,242,248,.88);
      max-width: 620px;
    }

    .section-head p {
      max-width: 360px;
      font-size: 18px;
      color: rgba(246,242,248,.54);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--line);
      background: #151515;
    }

    .process-card {
      min-height: 520px;
      padding: 48px 42px 38px;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .process-card:last-child {
      border-right: 0;
    }

    .step-number {
      font-family: "Geist Mono", monospace;
      font-size: 12px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.52);
      margin-bottom: 34px;
    }

    .line-icon {
      width: 122px;
      height: 122px;
      margin-bottom: 34px;
      position: relative;
      color: rgba(255,255,255,.76);
    }

    .icon-rays span {
      position: absolute;
      left: 54px;
      top: 58px;
      width: 58px;
      height: 1px;
      background: currentColor;
      transform-origin: 0 50%;
      opacity: .74;
    }

    .icon-rays .dot,
    .icon-orbits .dot,
    .icon-validate .dot {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 12px rgba(255,255,255,.36);
    }

    .icon-orbits .ring {
      position: absolute;
      width: 44px;
      height: 94px;
      border: 1px solid currentColor;
      border-radius: 50%;
      left: 34px;
      top: 13px;
      opacity: .72;
    }

    .icon-validate span {
      position: absolute;
      left: 18px;
      bottom: 30px;
      height: 1px;
      background: currentColor;
      transform-origin: 0 50%;
      opacity: .74;
    }

    .process-card h3 {
      font-size: clamp(31px, 3vw, 44px);
      line-height: .92;
      letter-spacing: -.071em;
      color: rgba(246,242,248,.88);
      margin-bottom: 18px;
    }

    .process-card p {
      font-size: 18px;
      line-height: 1.32;
      color: rgba(246,242,248,.62);
      max-width: 340px;
    }

    .mini-label {
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 11px;
      color: rgba(255,255,255,.34);
      margin-top: 34px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.10);
    }

    .use-cases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid var(--line);
      background: #151515;
    }

    .use-card {
      min-height: 260px;
      padding: 34px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .use-card:nth-child(3n) {
      border-right: 0;
    }

    .use-card h3 {
      font-size: 30px;
      letter-spacing: -.065em;
      margin-bottom: 16px;
      color: rgba(246,242,248,.86);
    }

    .use-card p {
      font-size: 16px;
      color: rgba(246,242,248,.56);
    }

    .use-card--has-img {
      padding-bottom: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .use-card-preview {
      margin-top: 24px;
      margin-left: -34px;
      margin-right: -34px;
      border-top: 1px solid var(--line);
      overflow: hidden;
      max-height: 220px;
    }

    .use-card-preview img {
      width: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      opacity: 0.88;
      transition: opacity 0.3s;
    }

    .use-card--has-img:hover .use-card-preview img {
      opacity: 1;
    }

    .small-index {
      font-family: "Geist Mono", monospace;
      font-size: 11px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.34);
      margin-bottom: 42px;
      display: block;
    }

    
.motion {
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(10,10,12,.12) 0%, rgba(10,10,12,.14) 100%),
        url('assets/image-03.png') center center / cover no-repeat;
      min-height: 380px;
      padding: 44px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .motion::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 50%, rgba(111,76,255,.12), transparent 34%),
        radial-gradient(circle at 78% 66%, rgba(255,138,72,.12), transparent 34%);
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 0;
    }

    .motion > * {
      position: relative;
      z-index: 1;
    }


    .motion h2 {
      font-size: clamp(48px, 7vw, 96px);
      line-height: .87;
      letter-spacing: -.08em;
      color: rgba(246,242,248,.84);
      max-width: 760px;
    }

    .motion p {
      color: rgba(255,255,255,.70);
      max-width: 390px;
      margin-top: 24px;
      font-size: 18px;
    }

    .marquee {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 28px;
      display: flex;
      gap: 44px;
      font-size: 54px;
      letter-spacing: -.08em;
      color: rgba(255,255,255,.25);
      white-space: nowrap;
      animation: marquee 18s linear infinite;
    }

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



    .sector-showcase {
      padding: 84px 0;
      background: #101010;
    }

    .sector-intro {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 28px;
    }

    .sector-intro h2 {
      font-size: clamp(46px, 6vw, 88px);
      line-height: .88;
      letter-spacing: -.078em;
      color: rgba(246,242,248,.88);
      max-width: 760px;
    }

    .sector-intro p {
      max-width: 360px;
      font-size: 18px;
      color: rgba(246,242,248,.56);
    }

    .sector-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .sector-card {
      min-height: 560px;
      border-radius: 22px;
      overflow: hidden;
      position: relative;
      background: #171717;
      box-shadow: 0 18px 44px rgba(0,0,0,.20);
    }

    .sector-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.58) 100%);
      pointer-events: none;
    }

    .sector-media {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.01);
    }

    .sector-copy {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 20px 22px;
      color: white;
    }

    .sector-topline {
      width: 64%;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      margin-bottom: 14px;
    }

    .sector-label {
      font-size: 18px;
      line-height: 1;
      letter-spacing: -.045em;
      color: rgba(255,255,255,.95);
    }

    .sector-bottom h3 {
      font-size: 28px;
      line-height: .95;
      letter-spacing: -.065em;
      color: rgba(255,255,255,.95);
      margin-bottom: 10px;
    }

    .sector-bottom p {
      font-size: 15px;
      line-height: 1.32;
      color: rgba(255,255,255,.80);
      max-width: 280px;
    }


    .video-section {
      padding: 84px 0;
      background: #101010;
      border-top: 1px solid var(--line);
    }

    .video-wrap {
      border: 1px solid var(--line);
      background: #151515;
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      min-height: 560px;
      overflow: hidden;
    }

    .video-copy {
      padding: 48px;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 42px;
    }

    .video-copy h2 {
      font-size: clamp(46px, 6vw, 88px);
      line-height: .87;
      letter-spacing: -.08em;
      color: rgba(246,242,248,.88);
      max-width: 560px;
    }

    .video-copy p {
      max-width: 360px;
      margin-top: 20px;
      font-size: 18px;
      color: rgba(246,242,248,.56);
    }

    .video-frame {
      position: relative;
      min-height: 560px;
      background:
        radial-gradient(circle at 45% 45%, rgba(219,164,255,.16), transparent 38%),
        #0e0e0f;
      overflow: hidden;
    }

    .video-frame video {
      width: 100%;
      height: 100%;
      min-height: 560px;
      object-fit: cover;
      display: block;
      opacity: .82;
      filter: saturate(1.08) contrast(1.04);
    }

    .video-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(16,16,16,.20), transparent 36%),
        radial-gradient(circle at 50% 50%, transparent 42%, rgba(16,16,16,.30));
      mix-blend-mode: normal;
    }

    .video-caption {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 24px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.64);
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-size: 11px;
    }


    .cta {
      padding: 88px 0 40px;
      background: #101010;
    }

    .cta-box {
      border: 1px solid var(--line);
      background: #151515;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      padding: 48px;
      align-items: end;
    }

    .cta h2 {
      font-size: clamp(52px, 7vw, 96px);
      line-height: .87;
      letter-spacing: -.08em;
      color: rgba(246,242,248,.88);
      max-width: 700px;
    }

    .cta p {
      max-width: 430px;
      margin-top: 18px;
      font-size: 18px;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 28px 0 0;
      color: rgba(255,255,255,.36);
      font-family: "Geist Mono", monospace;
      font-size: 11px;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    @media (max-width: 980px) {
      .hero, .intro-grid, .process-grid, .use-cases, .video-wrap, .cta-box {
        grid-template-columns: 1fr;
      }

      .dark-intro,
      .intro-grid {
        min-height: auto;
      }

      .dark-intro {
        padding: 84px 0 54px;
      }

      .intro-grid {
        gap: 28px;
        align-items: end;
        padding: 0 0 18px;
      }

      .intro-side {
        max-width: 520px;
      }

      .sector-grid {
        grid-template-columns: 1fr 1fr;
      }

      .sector-intro {
        flex-direction: column;
        align-items: flex-start;
      }

      .top-shell {
        min-height: auto;
      }

      .hero {
        padding: 110px 0 66px;
      }

      .hero-media {
        min-height: 420px;
      }

      .hero-media video {
        object-fit: contain;
      }

      .intro-copy,
      .process-card,
      .use-card,
      .video-copy {
        border-right: 0;
      }

      .process-card {
        min-height: 430px;
        border-bottom: 1px solid var(--line);
      }

      .process-card:last-child {
        border-bottom: 0;
      }

      .use-card:nth-child(3n) {
        border-right: 0;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 640px) {
      .inner {
        width: min(100vw - 24px, 1180px);
      }

      .nav-links a:not(.btn) {
        display: none;
      }

      .brand span {
        display: none;
      }

      .sector-grid {
        grid-template-columns: 1fr;
      }

      .sector-card {
        min-height: 420px;
      }

      .hero {
        gap: 34px;
      }

      .hero-media {
        min-height: 340px;
      }

      .hero-media-label {
        flex-direction: column;
        align-items: flex-start;
      }

      h1 {
        font-size: clamp(62px, 17vw, 92px);
      }

      .hero-copy {
        font-size: 18px;
      }

      .intro-copy,
      .process-card,
      .use-card,
      .video-copy,
      .motion,
      .cta-box {
        padding: 30px 24px;
      }

      .video-wrap,
      .video-frame,
      .video-frame video {
        min-height: 440px;
      }

      .video-caption {
        flex-direction: column;
        align-items: flex-start;
      }

      .wire-visual {
        min-height: 280px;
      }

      .footer {
        flex-direction: column;
      }
    }
  
    /* FINAL HERO MOTION FIX */
    .top-shell {
      min-height: 720px !important;
      background: #000000 !important;
      border-bottom: 0 !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .top-shell::after,
    .hero-section::before,
    .hero-media::before {
      content: none !important;
      display: none !important;
    }

    .hero-section {
      position: relative !important;
      min-height: 820px !important;
      display: flex !important;
      align-items: center !important;
      background: #000000 !important;
      overflow: hidden !important;
    }

    .hero-media {
      position: relative !important;
      min-height: 560px !important;
      width: min(580px, 100%) !important;
      margin-left: auto !important;
      border: 0 !important;
      background: #000000 !important;
      overflow: hidden !important;
      box-shadow: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transform: none !important;
      border-radius: 0 !important;
    }

    .hero-motion-direct-video {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 560px !important;
      object-fit: contain !important;
      background: #000000 !important;
      border: 0 !important;
      pointer-events: none !important;
    }

    .hero-media img,
    .hero-media picture,
    .hero-motion-webp,
    .hero-motion-alpha,
    .hero-motion-mov,
    .hero-motion-mp4,
    .hero-motion-guaranteed,
    .hero-motion-primary-img,
    .hero-motion-fallback {
      display: none !important;
    }


    @media (min-width: 981px) {
      .hero-media {
        transform: translateY(-28px) !important;
      }

      .hero-copy {
        transform: translateY(-12px);
      }
    }


    /* FINAL FULL-HEIGHT SECOND SECTION FIX */
    .dark-intro {
      position: relative !important;
      min-height: 920px !important;
      height: 100svh !important;
      width: 100% !important;
      display: flex !important;
      align-items: flex-end !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 50% 30%, rgba(255, 141, 119, .88) 0%, rgba(234, 132, 183, .66) 24%, rgba(169, 121, 231, .54) 48%, rgba(95, 75, 226, .82) 74%, rgba(45, 31, 115, 1) 100%) !important;
      isolation: isolate !important;
    }

    .dark-intro::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      height: 260px !important;
      background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.88) 20%, rgba(0,0,0,.46) 55%, rgba(0,0,0,0) 100%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
      display: block !important;
    }

    .dark-intro::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(180deg, rgba(8,8,10,0) 58%, rgba(8,8,10,.34) 82%, rgba(8,8,10,.82) 100%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
      display: block !important;
    }

    .intro-stage {
      position: relative !important;
      z-index: 2 !important;
      width: min(100vw - 64px, 1380px) !important;
      height: 100% !important;
      min-height: 920px !important;
      margin: 0 auto !important;
      padding: 0 0 86px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 430px) !important;
      gap: 72px !important;
      align-items: end !important;
      border: 0 !important;
    }

    .dark-intro .intro-copy {
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      align-self: end !important;
    }

    .dark-intro .intro-copy .eyebrow {
      margin-bottom: 18px !important;
      color: rgba(255,255,255,.58) !important;
    }

    .dark-intro .intro-copy h2 {
      margin: 0 !important;
      max-width: 820px !important;
      font-size: clamp(82px, 9.6vw, 156px) !important;
      line-height: .84 !important;
      letter-spacing: -.092em !important;
      color: rgba(246,242,248,.88) !important;
      text-wrap: balance !important;
    }

    .dark-intro .intro-side {
      align-self: end !important;
      max-width: 430px !important;
      padding: 0 0 12px !important;
      margin: 0 !important;
    }

    .dark-intro .intro-side p {
      margin: 0 !important;
      color: rgba(255,255,255,.82) !important;
      font-size: clamp(26px, 2.2vw, 36px) !important;
      line-height: 1.12 !important;
      letter-spacing: -.055em !important;
    }

    @media (max-width: 980px) {
      .dark-intro {
        min-height: 860px !important;
        height: auto !important;
      }

      .intro-stage {
        width: min(100vw - 28px, 1380px) !important;
        min-height: 860px !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 0 0 56px !important;
      }

      .dark-intro .intro-copy h2 {
        font-size: clamp(58px, 14vw, 92px) !important;
      }

      .dark-intro .intro-side p {
        font-size: 18px !important;
        line-height: 1.2 !important;
        max-width: 460px !important;
      }
    }


    /* SECOND SECTION REFINEMENT + SCROLL TRANSITION */
    .scroll-intro {
      --intro-progress: 0;
      position: relative !important;
      min-height: 100svh !important;
      height: 100svh !important;
      margin-top: 0 !important;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 148, 129, .90) 0%, rgba(232, 146, 185, .68) 24%, rgba(174, 131, 231, .54) 48%, rgba(99, 76, 227, .82) 74%, rgba(43, 30, 109, 1) 100%) !important;
      will-change: transform, opacity;
    }

    .scroll-intro::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background:
        linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.84) 14%, rgba(0,0,0,.30) 36%, rgba(0,0,0,0) 56%),
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, rgba(8,8,10,0) 62%, rgba(8,8,10,.34) 82%, rgba(8,8,10,.80) 100%) !important;
      opacity: calc(.78 - (var(--intro-progress) * .34)) !important;
      transition: opacity .18s linear;
      z-index: 0 !important;
      pointer-events: none !important;
    }

    .scroll-intro .intro-stage {
      position: relative !important;
      z-index: 2 !important;
      width: min(100vw - 64px, 1380px) !important;
      min-height: 100svh !important;
      height: 100% !important;
      margin: 0 auto !important;
      padding: 96px 0 84px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
      gap: 74px !important;
      align-items: end !important;
      transform: translate3d(0, calc((1 - var(--intro-progress)) * 84px), 0) scale(calc(.985 + (var(--intro-progress) * .015)));
      opacity: calc(.68 + (var(--intro-progress) * .32));
      filter: blur(calc((1 - var(--intro-progress)) * 6px));
      transition: transform .18s linear, opacity .18s linear, filter .18s linear;
    }

    .scroll-intro .intro-copy {
      align-self: start !important;
      padding-top: 10px !important;
      max-width: 700px !important;
    }

    .scroll-intro .intro-copy .eyebrow {
      margin-bottom: 22px !important;
      color: rgba(255,255,255,.56) !important;
    }

    .scroll-intro .intro-copy h2 {
      margin: 0 !important;
      max-width: 690px !important;
      font-size: clamp(66px, 7.6vw, 118px) !important;
      line-height: .88 !important;
      letter-spacing: -.085em !important;
      color: rgba(246,242,248,.88) !important;
      text-wrap: balance !important;
    }

    .scroll-intro .intro-side {
      align-self: end !important;
      max-width: 430px !important;
      padding: 0 0 18px !important;
    }

    .scroll-intro .intro-side p {
      margin: 0 !important;
      font-size: clamp(24px, 2vw, 34px) !important;
      line-height: 1.1 !important;
      letter-spacing: -.052em !important;
      color: rgba(255,255,255,.82) !important;
      text-wrap: balance !important;
    }

    .scroll-intro .intro-reveal {
      transform: translate3d(0, calc((1 - var(--intro-progress)) * 36px), 0);
      opacity: calc(.52 + (var(--intro-progress) * .48));
      transition: transform .18s linear, opacity .18s linear;
    }

    @media (max-width: 980px) {
      .scroll-intro {
        min-height: 860px !important;
        height: auto !important;
      }

      .scroll-intro .intro-stage {
        width: min(100vw - 28px, 1380px) !important;
        min-height: 860px !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 78px 0 56px !important;
        align-items: end !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
      }

      .scroll-intro .intro-copy {
        max-width: 100% !important;
      }

      .scroll-intro .intro-copy h2 {
        max-width: 720px !important;
        font-size: clamp(54px, 14vw, 88px) !important;
      }

      .scroll-intro .intro-side {
        max-width: 500px !important;
        padding-bottom: 0 !important;
      }

      .scroll-intro .intro-side p {
        font-size: 18px !important;
        line-height: 1.2 !important;
      }

      .scroll-intro .intro-reveal {
        transform: none !important;
        opacity: 1 !important;
      }
    }


    /* FINAL SECOND SECTION: STATIC + TUCKED LEFT */
    .dark-intro {
      position: relative !important;
      min-height: 100svh !important;
      height: 100svh !important;
      width: 100% !important;
      display: flex !important;
      align-items: stretch !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 148, 129, .90) 0%, rgba(232, 146, 185, .68) 24%, rgba(174, 131, 231, .54) 48%, rgba(99, 76, 227, .82) 74%, rgba(43, 30, 109, 1) 100%) !important;
      isolation: isolate !important;
    }

    .dark-intro::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background:
        linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 38%),
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, rgba(8,8,10,0) 62%, rgba(8,8,10,.34) 82%, rgba(8,8,10,.80) 100%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }

    .dark-intro::after {
      content: none !important;
    }

    .dark-intro .intro-stage {
      position: relative !important;
      z-index: 2 !important;
      width: min(100vw - 56px, 1380px) !important;
      min-height: 100svh !important;
      height: 100% !important;
      margin: 0 auto !important;
      padding: 88px 0 72px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 760px) minmax(280px, 430px) !important;
      gap: 64px !important;
      align-items: end !important;
      transform: none !important;
      opacity: 1 !important;
      filter: none !important;
    }

    .dark-intro .intro-copy {
      align-self: start !important;
      justify-self: start !important;
      padding-top: 4px !important;
      max-width: 640px !important;
      margin-left: 0 !important;
      transform: none !important;
      opacity: 1 !important;
    }

    .dark-intro .intro-copy .eyebrow {
      margin-bottom: 18px !important;
      color: rgba(255,255,255,.56) !important;
    }

    .dark-intro .intro-copy h2 {
      margin: 0 !important;
      max-width: 620px !important;
      font-size: clamp(54px, 6.5vw, 98px) !important;
      line-height: .88 !important;
      letter-spacing: -.078em !important;
      color: rgba(246,242,248,.90) !important;
      text-wrap: balance !important;
    }

    .dark-intro .intro-side {
      align-self: end !important;
      max-width: 420px !important;
      padding: 0 0 18px !important;
      margin: 0 !important;
      transform: none !important;
      opacity: 1 !important;
    }

    .dark-intro .intro-side p {
      margin: 0 !important;
      font-size: clamp(22px, 1.9vw, 32px) !important;
      line-height: 1.12 !important;
      letter-spacing: -.05em !important;
      color: rgba(255,255,255,.82) !important;
      text-wrap: balance !important;
    }

    @media (max-width: 980px) {
      .dark-intro {
        min-height: 860px !important;
        height: auto !important;
      }

      .dark-intro .intro-stage {
        width: min(100vw - 28px, 1380px) !important;
        min-height: 860px !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 72px 0 54px !important;
      }

      .dark-intro .intro-copy {
        max-width: 100% !important;
      }

      .dark-intro .intro-copy h2 {
        max-width: 560px !important;
        font-size: clamp(46px, 12vw, 76px) !important;
      }

      .dark-intro .intro-side {
        max-width: 480px !important;
        padding-bottom: 0 !important;
      }

      .dark-intro .intro-side p {
        font-size: 18px !important;
        line-height: 1.2 !important;
      }
    }


    /* FINAL ALIGNMENT REFINEMENT */
    .dark-intro {
      margin-top: 0 !important;
    }

    .dark-intro::before {
      background:
        linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.06) 12%, rgba(0,0,0,0) 26%),
        linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 22%),
        linear-gradient(180deg, rgba(8,8,10,0) 68%, rgba(8,8,10,.28) 84%, rgba(8,8,10,.78) 100%) !important;
    }

    .dark-intro .intro-stage {
      align-items: end !important;
      padding: 104px 0 82px !important;
      grid-template-columns: minmax(0, 640px) minmax(280px, 430px) !important;
      gap: 88px !important;
    }

    .dark-intro .intro-copy {
      align-self: end !important;
      justify-self: start !important;
      max-width: 560px !important;
      padding-top: 0 !important;
      padding-bottom: 12px !important;
      margin-left: 0 !important;
    }

    .dark-intro .intro-copy .eyebrow {
      margin-bottom: 16px !important;
    }

    .dark-intro .intro-copy h2 {
      max-width: 540px !important;
      font-size: clamp(46px, 5.5vw, 82px) !important;
      line-height: .90 !important;
      letter-spacing: -.074em !important;
    }

    .dark-intro .intro-side {
      align-self: end !important;
      max-width: 410px !important;
      padding: 0 0 12px !important;
    }

    .dark-intro .intro-side p {
      font-size: clamp(22px, 1.85vw, 30px) !important;
      line-height: 1.12 !important;
    }

    @media (max-width: 980px) {
      .dark-intro .intro-stage {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 76px 0 54px !important;
      }

      .dark-intro .intro-copy {
        align-self: start !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
      }

      .dark-intro .intro-copy h2 {
        max-width: 520px !important;
        font-size: clamp(42px, 11vw, 72px) !important;
      }

      .dark-intro .intro-side {
        max-width: 470px !important;
        padding-bottom: 0 !important;
      }
    }


    /* REMOVE BLACK BAND ACROSS SECTION 2 */
    .dark-intro {
      margin-top: -2px !important;
      border-top: 0 !important;
      box-shadow: none !important;
    }

    .dark-intro::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 12%, rgba(255,255,255,0) 28%),
        linear-gradient(180deg, rgba(8,8,10,0) 70%, rgba(8,8,10,.22) 86%, rgba(8,8,10,.68) 100%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }

    .dark-intro::after {
      content: none !important;
      display: none !important;
    }

    .top-shell,
    .hero-section {
      border-bottom: 0 !important;
      box-shadow: none !important;
    }


    /* FINAL HERO -> SECTION 2 FADE FIX */
    .top-shell,
    .hero-section {
      border-bottom: 0 !important;
      box-shadow: none !important;
    }

    .dark-intro {
      margin-top: -2px !important;
      border-top: 0 !important;
      box-shadow: none !important;
      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,1) 0px,
          rgba(0,0,0,.96) 48px,
          rgba(0,0,0,.72) 108px,
          rgba(0,0,0,.32) 178px,
          rgba(0,0,0,0) 250px
        ),
        radial-gradient(
          circle at 50% 24%,
          rgba(255,148,129,.90) 0%,
          rgba(232,146,185,.68) 24%,
          rgba(174,131,231,.54) 48%,
          rgba(99,76,227,.82) 74%,
          rgba(43,30,109,1) 100%
        ) !important;
    }

    .dark-intro::before,
    .dark-intro::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }


    /* FINAL SECTION 2 FADE + GRAIN FIX */
    .dark-intro {
      position: relative !important;
      isolation: isolate !important;
      margin-top: -1px !important;
      border-top: 0 !important;
      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,1) 0px,
          rgba(0,0,0,.92) 54px,
          rgba(0,0,0,.58) 126px,
          rgba(0,0,0,.18) 216px,
          rgba(0,0,0,0) 300px
        ),
        linear-gradient(
          0deg,
          rgba(20,20,20,1) 0px,
          rgba(20,20,20,.90) 58px,
          rgba(20,20,20,.52) 124px,
          rgba(20,20,20,.16) 198px,
          rgba(20,20,20,0) 278px
        ),
        radial-gradient(
          circle at 50% 24%,
          rgba(255,148,129,.90) 0%,
          rgba(232,146,185,.68) 24%,
          rgba(174,131,231,.54) 48%,
          rgba(99,76,227,.82) 74%,
          rgba(43,30,109,1) 100%
        ) !important;
      box-shadow: none !important;
    }

    .dark-intro::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 16%, rgba(255,255,255,0) 34%);
      z-index: 0 !important;
      pointer-events: none !important;
      display: block !important;
    }

    .dark-intro::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
      background-size: 180px 180px !important;
      background-repeat: repeat !important;
      opacity: .13 !important;
      mix-blend-mode: soft-light !important;
      z-index: 1 !important;
      pointer-events: none !important;
      display: block !important;
    }

    .dark-intro .intro-stage {
      position: relative !important;
      z-index: 2 !important;
    }

    .section#process {
      position: relative !important;
      background: #141414 !important;
      margin-top: 0 !important;
      z-index: 3 !important;
    }


    /* MORE BOTTOM PADDING + LATER BOTTOM FADE */
    .dark-intro .intro-stage {
      padding: 88px 0 126px !important;
    }

    .dark-intro .intro-side {
      padding: 0 0 34px !important;
    }

    .dark-intro {
      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,1) 0px,
          rgba(0,0,0,.92) 54px,
          rgba(0,0,0,.58) 126px,
          rgba(0,0,0,.18) 216px,
          rgba(0,0,0,0) 300px
        ),
        linear-gradient(
          0deg,
          rgba(20,20,20,1) 0px,
          rgba(20,20,20,.92) 34px,
          rgba(20,20,20,.52) 84px,
          rgba(20,20,20,.16) 136px,
          rgba(20,20,20,0) 208px
        ),
        radial-gradient(
          circle at 50% 24%,
          rgba(255,148,129,.90) 0%,
          rgba(232,146,185,.68) 24%,
          rgba(174,131,231,.54) 48%,
          rgba(99,76,227,.82) 74%,
          rgba(43,30,109,1) 100%
        ) !important;
    }

    @media (max-width: 980px) {
      .dark-intro .intro-stage {
        padding: 72px 0 88px !important;
      }

      .dark-intro .intro-side {
        padding-bottom: 20px !important;
      }
    }


    /* PROCESS LAYER VISUALS */
    .process-card.layer-card {
      gap: 28px;
    }

    .layer-visual {
      position: relative;
      min-height: 230px;
      margin: 8px 0 30px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 36%, rgba(176,112,255,.22), transparent 42%),
        linear-gradient(180deg, #101010 0%, #0b0b0c 100%);
      border: 1px solid rgba(255,255,255,.10);
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .layer-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 44%),
        radial-gradient(circle at 50% 50%, transparent 52%, rgba(0,0,0,.30));
      z-index: 2;
      pointer-events: none;
    }

    .layer-visual video {
      width: 100%;
      height: 100%;
      min-height: 230px;
      object-fit: cover;
      display: block;
      opacity: .94;
      filter: saturate(1.08) contrast(1.05);
      background: #050505;
    }

    .layer-caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 10px;
      color: rgba(255,255,255,.58);
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.12);
    }

    .layer-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .layer-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #a96dff;
      box-shadow: 0 0 18px rgba(169,109,255,.75);
    }

    .layer-explain {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      font-size: 14px !important;
      line-height: 1.36 !important;
      color: rgba(246,242,248,.52) !important;
    }

    @media (max-width: 980px) {
      .layer-visual {
        min-height: 260px;
      }

      .layer-visual video {
        min-height: 260px;
      }
    }


    /* SERVICES / ACCORDION PROCESS SECTION */
    .section#process {
      padding: 110px 0 96px !important;
      background: #141414 !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .services-layout {
      display: grid;
      grid-template-columns: minmax(300px, .82fr) minmax(420px, 1fr);
      gap: 92px;
      min-height: 760px;
      align-items: stretch;
    }

    .services-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 54px;
      min-height: 760px;
    }

    .services-title h2 {
      font-size: clamp(72px, 9vw, 148px);
      line-height: .86;
      letter-spacing: -.09em;
      color: rgba(246,242,248,.90);
      margin: 0;
    }

    .services-motion {
      width: min(520px, 100%);
      min-height: 270px;
      background: #0a0a0b;
      border: 1px solid rgba(255,255,255,.10);
      overflow: hidden;
      display: grid;
      place-items: center;
      position: relative;
      align-self: flex-start;
    }

    .services-motion::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.30));
    }

    .services-motion video {
      width: 100%;
      height: 100%;
      min-height: 270px;
      object-fit: cover;
      display: block;
      background: #050505;
      opacity: .95;
      filter: saturate(1.08) contrast(1.05);
    }

    .services-motion-label {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.56);
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 10px;
      pointer-events: none;
    }

    .services-right {
      align-self: end;
      padding-bottom: 4px;
    }

    .services-intro {
      max-width: 620px;
      margin-bottom: 64px;
      color: rgba(246,242,248,.82);
      font-size: clamp(28px, 3.2vw, 48px);
      line-height: 1.02;
      letter-spacing: -.071em;
    }

    .services-accordion {
      border-top: 1px solid rgba(255,255,255,.34);
    }

    .service-item {
      border-bottom: 1px solid rgba(255,255,255,.28);
      padding: 0;
    }

    .service-toggle {
      width: 100%;
      border: 0;
      background: transparent;
      color: rgba(246,242,248,.90);
      padding: 18px 0 16px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 22px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
    }

    .service-toggle span {
      display: flex;
      align-items: baseline;
      gap: 18px;
      font-size: clamp(30px, 3.3vw, 46px);
      line-height: .98;
      letter-spacing: -.075em;
    }

    .service-index {
      font-family: "Geist Mono", monospace;
      font-size: 11px;
      letter-spacing: .05em;
      color: rgba(255,255,255,.45);
      min-width: 28px;
    }

    .service-arrow {
      font-size: 28px;
      line-height: 1;
      color: rgba(246,242,248,.72);
      transition: transform .22s ease;
    }

    .service-item.is-open .service-arrow {
      transform: rotate(180deg);
    }

    .service-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
    }

    .service-item.is-open .service-panel {
      max-height: 260px;
    }

    .service-panel-inner {
      padding: 0 54px 26px 46px;
      max-width: 620px;
    }

    .service-panel p {
      color: rgba(246,242,248,.62);
      font-size: 16px;
      line-height: 1.42;
      letter-spacing: -.025em;
      margin: 0;
    }

    .service-mini {
      margin-top: 18px;
      font-family: "Geist Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 10px;
      color: rgba(255,255,255,.36);
    }

    @media (max-width: 980px) {
      .services-layout {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 44px;
      }

      .services-left {
        min-height: auto;
      }

      .services-motion {
        order: 2;
        width: 100%;
      }

      .services-right {
        align-self: stretch;
      }

      .services-intro {
        margin-bottom: 34px;
      }

      .service-panel-inner {
        padding-left: 0;
        padding-right: 0;
      }
    }


    /* MATCH SERVICES SECTION TO VIDEO BLACK */
    .section#process {
      background: #050505 !important;
    }

    .services-layout,
    .services-left,
    .services-right {
      background: transparent !important;
    }

    .services-motion {
      background: #050505 !important;
      border-color: rgba(255,255,255,.08) !important;
    }

    .services-motion video {
      background: #050505 !important;
    }


    /* SERVICES REFINEMENT: NO IMAGE BORDER + THINNER TYPE + TECH ARROWS */
    .services-motion {
      border: 0 !important;
      box-shadow: none !important;
      background: #050505 !important;
    }

    .services-motion::after {
      background:
        linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 50% 50%, transparent 46%, rgba(0,0,0,.24)) !important;
    }

    .services-motion-label {
      border-top: 0 !important;
      padding-top: 0 !important;
    }

    .services-intro {
      color: rgba(246,242,248,.88) !important;
      font-weight: 300 !important;
      letter-spacing: -.078em !important;
      line-height: .98 !important;
    }

    .service-toggle {
      color: rgba(246,242,248,.90) !important;
    }

    .service-toggle span {
      font-weight: 300 !important;
      letter-spacing: -.082em !important;
      line-height: .94 !important;
    }

    .service-panel p {
      color: rgba(246,242,248,.58) !important;
      font-weight: 300 !important;
      font-size: 15px !important;
      line-height: 1.38 !important;
      letter-spacing: -.032em !important;
    }

    .service-arrow {
      position: relative !important;
      width: 20px !important;
      height: 20px !important;
      display: inline-block !important;
      flex: 0 0 20px !important;
      color: rgba(246,242,248,.78) !important;
      font-size: 0 !important;
      line-height: 0 !important;
      transition: transform .22s ease !important;
      transform: rotate(0deg);
    }

    .service-arrow::before {
      content: "" !important;
      position: absolute !important;
      left: 4px !important;
      top: 2px !important;
      width: 9px !important;
      height: 9px !important;
      border-right: 1px solid currentColor !important;
      border-bottom: 1px solid currentColor !important;
      transform: rotate(45deg) !important;
      transform-origin: center !important;
    }

    .service-item.is-open .service-arrow {
      transform: rotate(180deg) !important;
    }


    /* FIX PURPLE -> SERVICES TRANSITION */
    .dark-intro {
      position: relative !important;
      padding-bottom: 120px !important;
      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,1) 0px,
          rgba(0,0,0,.92) 52px,
          rgba(0,0,0,.56) 122px,
          rgba(0,0,0,.16) 220px,
          rgba(0,0,0,0) 312px
        ),
        linear-gradient(
          0deg,
          rgba(5,5,5,1) 0px,
          rgba(5,5,5,.97) 54px,
          rgba(5,5,5,.84) 118px,
          rgba(5,5,5,.58) 196px,
          rgba(5,5,5,.30) 280px,
          rgba(5,5,5,.08) 352px,
          rgba(5,5,5,0) 430px
        ),
        radial-gradient(
          circle at 50% 24%,
          rgba(255,148,129,.90) 0%,
          rgba(232,146,185,.68) 24%,
          rgba(174,131,231,.54) 48%,
          rgba(99,76,227,.82) 74%,
          rgba(43,30,109,1) 100%
        ) !important;
    }

    .dark-intro::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
      background-size: 180px 180px !important;
      background-repeat: repeat !important;
      opacity: .10 !important;
      mix-blend-mode: soft-light !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }

    .dark-intro .intro-stage {
      position: relative !important;
      z-index: 2 !important;
    }

    .section#process {
      position: relative !important;
      background: #050505 !important;
      margin-top: -1px !important;
      padding-top: 132px !important;
      z-index: 3 !important;
      overflow: hidden !important;
    }

    .section#process::before {
      content: "" !important;
      position: absolute !important;
      top: -150px !important;
      left: 0 !important;
      right: 0 !important;
      height: 220px !important;
      background: linear-gradient(
        180deg,
        rgba(5,5,5,0) 0%,
        rgba(5,5,5,.16) 24%,
        rgba(5,5,5,.46) 48%,
        rgba(5,5,5,.78) 72%,
        rgba(5,5,5,1) 100%
      ) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }

    .section#process > .inner {
      position: relative !important;
      z-index: 1 !important;
    }


    /* EXTEND GRADIENT SECTION HEIGHT + MORE SPACE UNDER TEXT */
    .dark-intro {
      min-height: 112svh !important;
      padding-bottom: 0 !important;
    }

    .dark-intro .intro-stage {
      min-height: 112svh !important;
      padding: 110px 0 176px !important;
      align-items: end !important;
    }

    .dark-intro .intro-copy {
      padding-bottom: 44px !important;
    }

    .dark-intro .intro-side {
      padding: 0 0 56px !important;
    }

    .dark-intro .intro-copy h2 {
      margin-bottom: 0 !important;
    }

    @media (max-width: 980px) {
      .dark-intro {
        min-height: 980px !important;
      }

      .dark-intro .intro-stage {
        min-height: 980px !important;
        padding: 84px 0 110px !important;
      }

      .dark-intro .intro-copy {
        padding-bottom: 10px !important;
      }

      .dark-intro .intro-side {
        padding-bottom: 26px !important;
      }
    }


/* --- Why Vivid replacement section --- */
.why-vivid{
  background:#101010;
  padding:96px 0 104px;
  color:var(--text);
  position:relative;
}
.why-vivid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(111,76,255,.08), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(219,164,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.why-vivid .inner{
  max-width:1240px;
  position:relative;
  z-index:1;
}
.why-vivid__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 22px;
  border-radius:12px;
  background:var(--purple);
  color:#151015;
  font-size:18px;
  letter-spacing:-.02em;
  margin-bottom:28px;
  box-shadow:0 12px 26px rgba(219,164,255,.20);
}
.why-vivid__title{
  font-size:clamp(44px, 5.2vw, 76px);
  line-height:.94;
  letter-spacing:-.075em;
  color:rgba(246,242,248,.92);
  margin:0 0 34px 0;
}
.why-vivid__media{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#131313;
  position:relative;
  margin-bottom:30px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.why-vivid__video{
  width:100%;
  display:block;
  aspect-ratio: 16 / 6;
  object-fit:cover;
  background:#131313;
}
.why-vivid__points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:38px;
  align-items:start;
}
.why-vivid__point h3{
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.035em;
  color:rgba(246,242,248,.92);
  margin:0 0 12px 0;
}
.why-vivid__point p{
  font-size:15px;
  line-height:1.45;
  color:rgba(246,242,248,.58);
  margin:0;
}
@media (max-width: 980px){
  .why-vivid{
    padding:74px 0 80px;
  }
  .why-vivid__title{
    font-size:clamp(40px, 9vw, 60px);
    margin-bottom:24px;
  }
  .why-vivid__video{
    aspect-ratio:16 / 9;
  }
  .why-vivid__points{
    grid-template-columns:1fr;
    gap:24px;
  }
}



  html.js-ready .blur-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    filter: blur(18px);
    transition:
      opacity 980ms cubic-bezier(.16, 1, .3, 1),
      transform 980ms cubic-bezier(.16, 1, .3, 1),
      filter 980ms cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform, filter;
  }

  html.js-ready .blur-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }

  html.js-ready .blur-reveal[data-delay="1"] { transition-delay: 90ms; }
  html.js-ready .blur-reveal[data-delay="2"] { transition-delay: 170ms; }
  html.js-ready .blur-reveal[data-delay="3"] { transition-delay: 250ms; }
  html.js-ready .blur-reveal[data-delay="4"] { transition-delay: 330ms; }

  .top-shell,
  .dark-intro,
  .section,
  .why-vivid,
  .sector-showcase,
  .video-section,
  .cta {
    position: relative;
  }

  .section-blur-fade::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    height: 180px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      180deg,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,.34) 42%,
      rgba(5,5,5,0) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: .34;
  }

  .section-blur-fade > .inner,
  .section-blur-fade > header,
  .section-blur-fade > footer {
    position: relative;
    z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    html.js-ready .blur-reveal {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
    }

    .section-blur-fade::before {
      display: none;
    }
  }


  .dark-intro .intro-stage{
    width: min(100vw - 86px, 1420px) !important;
    grid-template-columns: minmax(0, 760px) minmax(320px, 420px) !important;
    gap: clamp(76px, 10vw, 180px) !important;
    align-items: end !important;
    padding: 112px 0 118px !important;
  }

  .dark-intro .intro-copy{
    align-self: end !important;
    justify-self: start !important;
    max-width: 760px !important;
    padding-bottom: 0 !important;
  }

  .dark-intro .intro-copy .eyebrow{
    margin-bottom: 22px !important;
  }

  .dark-intro .intro-copy h2{
    max-width: 760px !important;
    font-size: clamp(52px, 5.35vw, 86px) !important;
    line-height: .92 !important;
    letter-spacing: -.074em !important;
    color: rgba(246,242,248,.91) !important;
    text-wrap: balance !important;
  }

  .dark-intro .intro-side{
    justify-self: end !important;
    align-self: end !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: 12px !important;
    padding: 0 0 8px !important;
  }

  .dark-intro .intro-side p{
    max-width: 420px !important;
    font-size: clamp(22px, 1.72vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.047em !important;
    color: rgba(246,242,248,.86) !important;
  }

  @media (max-width: 980px){
    .dark-intro .intro-stage{
      width: min(100vw - 28px, 1420px) !important;
      grid-template-columns: 1fr !important;
      gap: 30px !important;
      padding: 86px 0 74px !important;
    }

    .dark-intro .intro-copy,
    .dark-intro .intro-copy h2{
      max-width: 100% !important;
    }

    .dark-intro .intro-copy h2{
      font-size: clamp(42px, 10.8vw, 70px) !important;
    }

    .dark-intro .intro-side{
      justify-self: start !important;
      max-width: 430px !important;
      margin-right: 0 !important;
      padding-bottom: 0 !important;
    }

    .dark-intro .intro-side p{
      font-size: 18px !important;
      line-height: 1.14 !important;
    }
  }


  /* Final seamless blend between the purple gradient section and Services */
  .dark-intro {
    position: relative !important;
    min-height: 126svh !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,1) 0px,
        rgba(0,0,0,.92) 56px,
        rgba(0,0,0,.56) 132px,
        rgba(0,0,0,.14) 240px,
        rgba(0,0,0,0) 348px
      ),
      linear-gradient(
        0deg,
        #050505 0px,
        rgba(5,5,5,.985) 64px,
        rgba(5,5,5,.92) 128px,
        rgba(5,5,5,.74) 214px,
        rgba(5,5,5,.48) 314px,
        rgba(5,5,5,.18) 434px,
        rgba(5,5,5,0) 560px
      ),
      radial-gradient(
        circle at 50% 24%,
        rgba(255,148,129,.90) 0%,
        rgba(232,146,185,.68) 24%,
        rgba(174,131,231,.54) 48%,
        rgba(99,76,227,.82) 74%,
        rgba(43,30,109,1) 100%
      ) !important;
  }

  .dark-intro::before {
    content: none !important;
    display: none !important;
  }

  .dark-intro::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
    background-size: 180px 180px !important;
    background-repeat: repeat !important;
    opacity: .08 !important;
    mix-blend-mode: soft-light !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .dark-intro .intro-stage {
    position: relative !important;
    z-index: 2 !important;
    min-height: 126svh !important;
    height: auto !important;
    padding: 118px 0 260px !important;
    align-items: end !important;
  }

  .dark-intro .intro-copy {
    align-self: end !important;
    padding-bottom: 78px !important;
    max-width: 690px !important;
  }

  .dark-intro .intro-copy h2 {
    max-width: 700px !important;
  }

  .dark-intro .intro-side {
    align-self: end !important;
    padding: 0 0 92px !important;
  }

  .section#process {
    position: relative !important;
    z-index: 3 !important;
    background: #050505 !important;
    margin-top: -178px !important;
    padding-top: 228px !important;
    overflow: hidden !important;
  }

  .section#process::before,
  .section#process::after {
    content: none !important;
    display: none !important;
  }

  .section#process > .inner {
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 980px) {
    .dark-intro {
      min-height: 1060px !important;
    }

    .dark-intro .intro-stage {
      min-height: 1060px !important;
      padding: 88px 0 200px !important;
      gap: 34px !important;
    }

    .dark-intro .intro-copy {
      padding-bottom: 16px !important;
      max-width: 100% !important;
    }

    .dark-intro .intro-side {
      padding: 0 0 46px !important;
    }

    .section#process {
      margin-top: -126px !important;
      padding-top: 170px !important;
    }
  }


  .why-vivid {
    background: #101010 !important;
  }

  .why-vivid__title {
    font-size: clamp(50px, 6.6vw, 92px) !important;
    line-height: .94 !important;
    letter-spacing: -.078em !important;
    max-width: 1100px !important;
    margin: 0 0 34px 0 !important;
  }

  .why-vivid__title--dynamic {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .why-vivid__title-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .17em !important;
  }

  .why-vivid__title-word {
    position: relative !important;
    display: inline-block !important;
    color: rgba(246,242,248,.40) !important;
    text-shadow: none !important;
    animation: vividWordShift 9s infinite ease-in-out !important;
    animation-delay: var(--word-delay) !important;
    will-change: color, text-shadow, opacity, transform !important;
  }

  .why-vivid__title-word::after {
    content: "" !important;
    position: absolute !important;
    left: -.08em !important;
    right: -.08em !important;
    bottom: .06em !important;
    height: .18em !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(214,161,255,.24), rgba(214,161,255,.08)) !important;
    opacity: 0 !important;
    transform: scaleX(.72) !important;
    transform-origin: left center !important;
    filter: blur(10px) !important;
    animation: vividWordGlow 9s infinite ease-in-out !important;
    animation-delay: var(--word-delay) !important;
    pointer-events: none !important;
  }

  @keyframes vividWordShift {
    0%, 22%, 100% {
      color: rgba(246,242,248,.40);
      text-shadow: none;
      opacity: .8;
      transform: translateY(0);
    }
    6%, 16% {
      color: rgba(255,255,255,.98);
      text-shadow: 0 0 14px rgba(214,161,255,.16), 0 0 36px rgba(214,161,255,.10);
      opacity: 1;
      transform: translateY(-1px);
    }
  }

  @keyframes vividWordGlow {
    0%, 22%, 100% {
      opacity: 0;
      transform: scaleX(.72);
    }
    6%, 16% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  .why-vivid__media {
    aspect-ratio: 16 / 6 !important;
    min-height: 560px !important;
    background: #101010 !important;
  }

  .why-vivid__video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    height: 142% !important;
    min-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.1) !important;
    transform-origin: center center !important;
    display: block !important;
    background: #101010 !important;
  }

  .why-vivid__points {
    margin-top: 6px !important;
  }

  @media (max-width: 1100px) {
    .why-vivid__media {
      min-height: 460px !important;
    }
  }

  @media (max-width: 980px) {
    .why-vivid__title {
      font-size: clamp(42px, 11vw, 72px) !important;
      gap: 8px !important;
    }

    .why-vivid__media {
      min-height: 360px !important;
      aspect-ratio: 4 / 5 !important;
    }

    .why-vivid__video {
      height: 122% !important;
      min-width: 142% !important;
      transform: translate(-50%, -50%) rotate(90deg) scale(1.02) !important;
    }
  }


  :root {
    --vivid-transition-black: #050505;
    --vivid-transition-charcoal: #121212;
  }

  /* 1) PURPLE GRADIENT SECTION -> BLACK */
  .dark-intro {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    min-height: 138svh !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,1) 0px,
        rgba(0,0,0,.92) 58px,
        rgba(0,0,0,.56) 136px,
        rgba(0,0,0,.14) 244px,
        rgba(0,0,0,0) 352px
      ),
      radial-gradient(
        circle at 50% 24%,
        rgba(255,148,129,.92) 0%,
        rgba(232,146,185,.70) 24%,
        rgba(174,131,231,.56) 48%,
        rgba(99,76,227,.84) 74%,
        rgba(43,30,109,1) 100%
      ) !important;
  }

  .dark-intro::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 360px !important;
    background: linear-gradient(
      180deg,
      rgba(34,24,83,0) 0%,
      rgba(20,15,50,.18) 12%,
      rgba(11,10,24,.38) 30%,
      rgba(7,7,13,.62) 48%,
      rgba(5,5,8,.82) 68%,
      var(--vivid-transition-black) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .dark-intro::after {
    z-index: 1 !important;
    opacity: .09 !important;
  }

  .dark-intro .intro-stage {
    position: relative !important;
    z-index: 3 !important;
    min-height: 138svh !important;
    padding: 126px 0 340px !important;
    align-items: end !important;
  }

  .dark-intro .intro-copy {
    max-width: 730px !important;
    padding-bottom: 122px !important;
  }

  .dark-intro .intro-copy h2 {
    max-width: 760px !important;
  }

  .dark-intro .intro-side {
    padding: 0 0 124px !important;
  }

  /* 2) SERVICES / PROCESS SECTION AS TRUE BLACK */
  #process.section {
    position: relative !important;
    background: var(--vivid-transition-black) !important;
    padding-top: 92px !important;
    padding-bottom: 240px !important;
    z-index: 3 !important;
    overflow: hidden !important;
  }

  #process > .inner {
    position: relative !important;
    z-index: 2 !important;
  }

  /* black section easing into charcoal below */
  #process::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 270px !important;
    background: linear-gradient(
      180deg,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,.36) 18%,
      rgba(7,7,7,.62) 42%,
      rgba(10,10,10,.82) 68%,
      var(--vivid-transition-charcoal) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* 3) USE CASES SECTION STARTS IN CHARCOAL AND CONTINUES SMOOTHLY */
  #use-cases.section-alt {
    position: relative !important;
    background: var(--vivid-transition-charcoal) !important;
    margin-top: 0 !important;
    padding-top: 120px !important;
    z-index: 2 !important;
  }

  #use-cases.section-alt::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 160px !important;
    background: linear-gradient(
      180deg,
      rgba(18,18,18,.96) 0%,
      rgba(18,18,18,.78) 28%,
      rgba(18,18,18,.45) 62%,
      rgba(18,18,18,0) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #use-cases > .inner {
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 980px) {
    .dark-intro {
      min-height: auto !important;
    }

    .dark-intro .intro-stage {
      min-height: auto !important;
      padding: 92px 0 250px !important;
    }

    .dark-intro .intro-copy {
      padding-bottom: 38px !important;
    }

    .dark-intro .intro-side {
      padding-bottom: 38px !important;
    }

    .dark-intro::before {
      height: 250px !important;
    }

    #process.section {
      padding-top: 72px !important;
      padding-bottom: 190px !important;
    }

    #process::after {
      height: 210px !important;
    }

    #use-cases.section-alt {
      padding-top: 84px !important;
    }

    #use-cases.section-alt::before {
      height: 120px !important;
    }
  }


  .why-vivid__media {
    position: relative !important;
    width: 100% !important;
    min-height: 560px !important;
    aspect-ratio: 16 / 6 !important;
    overflow: hidden !important;
    background: #090909 !important;
  }

  .why-vivid__video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 185% !important;
    height: 185% !important;
    min-width: 185% !important;
    min-height: 185% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: #090909 !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.0) !important;
    transform-origin: center center !important;
  }

  @media (max-width: 1280px) {
    .why-vivid__media {
      min-height: 500px !important;
    }

    .why-vivid__video {
      width: 205% !important;
      height: 205% !important;
      min-width: 205% !important;
      min-height: 205% !important;
    }
  }

  @media (max-width: 980px) {
    .why-vivid__media {
      min-height: 360px !important;
      aspect-ratio: 4 / 5 !important;
    }

    .why-vivid__video {
      width: 150% !important;
      height: 150% !important;
      min-width: 150% !important;
      min-height: 150% !important;
    }
  }


  /* Force a real fade from the purple gradient section into the Services black section */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
    min-height: 1020px !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.90) 7%,
        rgba(0,0,0,.42) 18%,
        rgba(0,0,0,0) 28%
      ),
      radial-gradient(
        circle at 50% 24%,
        rgba(255,148,129,.92) 0%,
        rgba(231,151,192,.72) 24%,
        rgba(181,143,233,.56) 49%,
        rgba(103,81,226,.86) 76%,
        rgba(41,28,104,1) 100%
      ) !important;
  }

  #what-we-do.dark-intro::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 32%),
      linear-gradient(
        180deg,
        rgba(7,7,7,0) 56%,
        rgba(7,7,7,.08) 66%,
        rgba(7,7,7,.24) 76%,
        rgba(7,7,7,.48) 84%,
        rgba(7,7,7,.78) 92%,
        rgba(7,7,7,.96) 98%,
        #070707 100%
      ) !important;
  }

  #what-we-do .intro-stage {
    position: relative !important;
    z-index: 1 !important;
    min-height: 1020px !important;
    padding: 90px 0 250px !important;
    align-items: end !important;
  }

  #what-we-do .intro-copy,
  #what-we-do .intro-side {
    padding-bottom: 28px !important;
  }

  #process.section {
    position: relative !important;
    z-index: 2 !important;
    background: #070707 !important;
    margin-top: -170px !important;
    padding-top: 240px !important;
    overflow: hidden !important;
  }

  #process.section::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 190px !important;
    background: linear-gradient(
      180deg,
      rgba(7,7,7,0) 0%,
      rgba(7,7,7,.18) 28%,
      rgba(7,7,7,.56) 64%,
      rgba(7,7,7,.88) 86%,
      #070707 100%
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #process.section > .inner {
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro {
      min-height: 900px !important;
    }

    #what-we-do .intro-stage {
      min-height: 900px !important;
      padding: 70px 0 200px !important;
    }

    #process.section {
      margin-top: -130px !important;
      padding-top: 190px !important;
    }

    #process.section::before {
      height: 150px !important;
    }
  }


  /* Hard override: use a real bridge element so the gradient visibly fades into black */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.88) 8%, rgba(0,0,0,.36) 18%, rgba(0,0,0,0) 28%),
      radial-gradient(circle at 50% 24%, rgba(255,149,132,.90) 0%, rgba(226,153,193,.74) 26%, rgba(171,143,231,.70) 52%, rgba(96,81,225,.92) 78%, rgba(43,34,108,1) 100%) !important;
    z-index: 1 !important;
  }

  #what-we-do.dark-intro::before,
  #what-we-do.dark-intro::after,
  #process.section::before {
    display: none !important;
  }

  #what-we-do.dark-intro .intro-stage {
    min-height: 1080px !important;
    padding: 96px 0 320px !important; /* extra room before the bridge */
    align-items: end !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    height: 300px !important;
    margin-top: -300px !important; /* overlays the bottom of the gradient section */
    margin-bottom: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(105, 89, 228, 0.00) 0%,
        rgba(103, 87, 219, 0.18) 12%,
        rgba(92, 73, 194, 0.36) 28%,
        rgba(66, 50, 139, 0.56) 46%,
        rgba(38, 28, 82, 0.76) 64%,
        rgba(20, 16, 36, 0.92) 82%,
        #070707 100%
      ) !important;
  }

  #process.section {
    position: relative !important;
    z-index: 2 !important;
    background: #070707 !important;
    margin-top: 0 !important;
    padding-top: 96px !important;
    overflow: hidden !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro .intro-stage {
      min-height: 920px !important;
      padding: 76px 0 240px !important;
    }

    .vivid-gradient-black-bridge {
      height: 220px !important;
      margin-top: -220px !important;
    }

    #process.section {
      padding-top: 74px !important;
    }
  }


  /* True bridge between the black services section and the charcoal use-cases section */
  #process.section {
    background: #070707 !important;
    overflow: visible !important;
    padding-bottom: 280px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #process.section::after,
  #use-cases.section-alt::before {
    display: none !important;
  }

  .vivid-black-charcoal-bridge {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    height: 240px !important;
    margin-top: -240px !important; /* sit on top of the bottom of the black section */
    margin-bottom: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(7,7,7,0) 0%,
      rgba(7,7,7,.12) 10%,
      rgba(7,7,7,.28) 22%,
      rgba(8,8,8,.48) 38%,
      rgba(10,10,10,.72) 58%,
      rgba(13,13,13,.88) 78%,
      #141414 100%
    ) !important;
  }

  #use-cases.section-alt {
    background: #141414 !important;
    margin-top: 0 !important;
    padding-top: 92px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #use-cases.section-alt > .inner {
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 980px) {
    #process.section {
      padding-bottom: 220px !important;
    }

    .vivid-black-charcoal-bridge {
      height: 190px !important;
      margin-top: -190px !important;
    }

    #use-cases.section-alt {
      padding-top: 76px !important;
    }
  }


  .why-vivid__media{
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 16 / 7 !important;
    min-height: 560px !important;
    background: #090909 !important;
    border-radius: 14px !important;
  }

  .why-vivid__media .why-vivid__video{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.02) !important;
    transform-origin: center center !important;
    background: #090909 !important;
    opacity: 1 !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  @media (max-width: 1200px){
    .why-vivid__media{ min-height: 470px !important; }
  }

  @media (max-width: 760px){
    .why-vivid__media{
      aspect-ratio: 4 / 3 !important;
      min-height: 320px !important;
    }
    .why-vivid__media .why-vivid__video{
      transform: scale(1.04) !important;
    }
  }


  /* Make all major section panels/cards square-edged instead of rounded */
  .hero-media,
  .services-motion,
  .sector-card,
  .sector-media,
  .why-vivid__media,
  .use-card,
  .process-card,
  .motion,
  .video-frame,
  .screen,
  .cta-box,
  .feature-card,
  .panel,
  .card,
  .visual-card,
  .media-card,
  .section-card {
    border-radius: 0 !important;
  }

  /* Ensure images/videos inside cards also stay square */
  .sector-card::before,
  .sector-card::after,
  .sector-media::before,
  .why-vivid__media::before,
  .why-vivid__media::after,
  .services-motion::before,
  .services-motion::after {
    border-radius: 0 !important;
  }

  .sector-card img,
  .sector-card video,
  .sector-media,
  .why-vivid__video,
  .hero-motion-direct-video,
  .services-motion video {
    border-radius: 0 !important;
  }

  /* Keep small CTA pills intentionally rounded unless specifically changed later */
  .why-vivid__pill,
  .hero-btn,
  .btn,
  button,
  .service-toggle {
    /* no global square override for interaction controls */
  }


  .sector-card,
  .sector-media {
    border-radius: 0 !important;
  }

  .sector-media {
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(.9) contrast(1.04) brightness(.82) !important;
  }

  .sector-card:nth-child(1) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(2) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(3) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(4) .sector-media { background-position: center center !important; }

  .sector-card::after {
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.72) 100%) !important;
  }


  .why-vivid__pill {
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 12px 28px rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  .why-vivid__title,
  .why-vivid__title-line,
  .why-vivid__title-word {
    color: rgba(246,242,248,.96) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    animation: none !important;
    filter: none !important;
  }

  .why-vivid__title-word::after {
    opacity: 0 !important;
    display: none !important;
    animation: none !important;
  }


  :root {
    --services-image-black: #0a0a0a;
  }

  /* Match the Services section background exactly to the black inside the animated layer graphic */
  #process.section,
  .section#process,
  .services-layout,
  .services-left,
  .services-title,
  .services-accordion {
    background: var(--services-image-black) !important;
  }

  #process.section {
    background-color: var(--services-image-black) !important;
    background-image: none !important;
  }

  .services-motion {
    background: var(--services-image-black) !important;
    background-color: var(--services-image-black) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .services-motion video {
    background: var(--services-image-black) !important;
  }

  .services-motion::before,
  .services-motion::after {
    background: none !important;
    box-shadow: none !important;
  }

  .services-motion-label {
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.76) 45%, rgba(10,10,10,1) 100%) !important;
    border-top-color: rgba(255,255,255,.08) !important;
  }

  /* Keep the fade bridges ending/starting on the exact same black */
  .vivid-gradient-black-bridge {
    background:
      linear-gradient(
        180deg,
        rgba(105, 89, 228, 0.00) 0%,
        rgba(88, 73, 202, 0.16) 16%,
        rgba(58, 47, 132, 0.36) 36%,
        rgba(30, 25, 66, 0.62) 58%,
        rgba(14, 14, 18, 0.86) 78%,
        var(--services-image-black) 100%
      ) !important;
  }

  .vivid-black-charcoal-bridge {
    background:
      linear-gradient(
        180deg,
        rgba(10,10,10,0) 0%,
        rgba(10,10,10,.16) 18%,
        rgba(10,10,10,.40) 42%,
        rgba(12,12,12,.70) 68%,
        #141414 100%
      ) !important;
  }


  /* Seamless fade from the charcoal use-cases section into the black Why Vivid section */
  #use-cases.section-alt {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    padding-bottom: 220px !important;
  }

  #use-cases.section-alt::after {
    display: none !important;
  }

  .usecases-whyvivid-bridge {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    height: 220px !important;
    margin-top: -220px !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(23,23,23,0) 0%,
        rgba(22,22,22,.12) 10%,
        rgba(20,20,20,.24) 22%,
        rgba(18,18,18,.44) 38%,
        rgba(15,15,15,.66) 56%,
        rgba(12,12,12,.86) 76%,
        #0a0a0a 100%
      ) !important;
  }

  .why-vivid {
    position: relative !important;
    z-index: 2 !important;
    background: #0a0a0a !important;
    margin-top: 0 !important;
    padding-top: 82px !important;
  }

  @media (max-width: 980px) {
    #use-cases.section-alt {
      padding-bottom: 170px !important;
    }

    .usecases-whyvivid-bridge {
      height: 170px !important;
      margin-top: -170px !important;
    }

    .why-vivid {
      padding-top: 68px !important;
    }
  }


  :root{
    --motion-black: #030303;
    --site-charcoal: #111111;
  }

  /* Services/motion graphic section: deep black to match the animation background */
  #process.section,
  #process,
  .services-layout,
  .services-left,
  .services-right {
    background: var(--motion-black) !important;
    background-color: var(--motion-black) !important;
    background-image: none !important;
  }

  .services-motion {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .services-motion::before,
  .services-motion::after {
    display: none !important;
    background: none !important;
  }

  .services-motion video {
    background: transparent !important;
    mix-blend-mode: screen !important;
    opacity: 1 !important;
    filter: saturate(1.08) contrast(1.05) brightness(1.02) !important;
  }

  .services-motion-label {
    background: linear-gradient(180deg, rgba(3,3,3,0) 0%, rgba(3,3,3,.72) 58%, rgba(3,3,3,1) 100%) !important;
    border-top-color: rgba(255,255,255,.08) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.65) !important;
  }

  /* Sector cards: use the uploaded product images in each box */
  .sector-card,
  .sector-media {
    border-radius: 0 !important;
  }

  .sector-media {
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(.94) contrast(1.04) brightness(.84) !important;
    opacity: 1 !important;
  }

  .sector-card:nth-child(1) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(2) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(3) .sector-media { background-position: center center !important; }
  .sector-card:nth-child(4) .sector-media { background-position: center center !important; }

  .sector-card::after {
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.78) 100%) !important;
  }

  .sector-copy {
    text-shadow: 0 1px 16px rgba(0,0,0,.42) !important;
  }


  :root { --vivid-deep-black: #030303; }

  /* Keep the entire Services section on one exact deep black plane */
  #process.section {
    background: var(--vivid-deep-black) !important;
    background-color: var(--vivid-deep-black) !important;
    background-image: none !important;
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 148px !important;
  }

  #process.section::before,
  #process.section::after,
  #process.section .services-title::before,
  #process.section .services-title::after {
    display: none !important;
    content: none !important;
  }

  #process.section > .inner,
  #process.section .services-layout,
  #process.section .services-left,
  #process.section .services-right,
  #process.section .services-title,
  #process.section .services-title h2,
  #process.section .services-title .eyebrow,
  #process.section .services-intro,
  #process.section .services-accordion,
  #process.section .service-item,
  #process.section .service-toggle,
  #process.section .service-panel,
  #process.section .service-panel-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #process.section .services-title {
    position: relative !important;
    isolation: isolate !important;
  }

  #process.section .services-title h2,
  #process.section .services-title .eyebrow {
    display: block !important;
    width: fit-content !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* Motion graphic box should visually melt into the section black */
  #process.section .services-motion {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  #process.section .services-motion::before,
  #process.section .services-motion::after {
    display: none !important;
    background: none !important;
  }

  #process.section .services-motion video {
    background: transparent !important;
    mix-blend-mode: screen !important;
    opacity: 1 !important;
    filter: saturate(1.08) contrast(1.05) brightness(1.02) !important;
  }

  #process.section .services-motion-label {
    background: linear-gradient(180deg, rgba(3,3,3,0) 0%, rgba(3,3,3,.72) 58%, rgba(3,3,3,1) 100%) !important;
    border-top-color: rgba(255,255,255,.08) !important;
  }

  /* Seamless fade from the purple/gradient section into the deep black services section */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  #what-we-do.dark-intro::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 300px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(
      180deg,
      rgba(107, 88, 228, 0) 0%,
      rgba(97, 79, 206, .10) 14%,
      rgba(75, 60, 159, .24) 30%,
      rgba(48, 38, 99, .44) 48%,
      rgba(23, 20, 42, .68) 68%,
      rgba(8, 8, 12, .88) 86%,
      var(--vivid-deep-black) 100%
    ) !important;
  }

  #what-we-do.dark-intro .intro-stage {
    position: relative !important;
    z-index: 2 !important;
    padding-bottom: 300px !important;
  }

  .vivid-gradient-black-bridge {
    display: block !important;
    height: 320px !important;
    position: relative !important;
    z-index: 4 !important;
    margin-top: -320px !important;
    margin-bottom: -120px !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(110, 92, 235, 0) 0%,
      rgba(95, 78, 204, .12) 16%,
      rgba(73, 58, 151, .28) 34%,
      rgba(46, 36, 94, .48) 52%,
      rgba(23, 19, 45, .72) 70%,
      rgba(8, 8, 12, .92) 88%,
      var(--vivid-deep-black) 100%
    ) !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro .intro-stage {
      padding-bottom: 230px !important;
    }

    #what-we-do.dark-intro::after {
      height: 230px !important;
    }

    .vivid-gradient-black-bridge {
      height: 240px !important;
      margin-top: -240px !important;
      margin-bottom: -88px !important;
    }

    #process.section {
      padding-top: 112px !important;
    }
  }


  :root { --vivid-deep-black-final: #020202; }

  /* Make the titles sit on the exact same deep black plane */
  #process.section,
  #process.section .services-left,
  #process.section .services-title,
  #process.section .services-title h2,
  #process.section .services-title .eyebrow {
    background: var(--vivid-deep-black-final) !important;
    background-color: var(--vivid-deep-black-final) !important;
    background-image: none !important;
  }

  #process.section {
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }

  #process.section > .inner {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Strong seamless bridge overlay from purple gradient into the deep black section */
  #what-we-do.dark-intro {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }

  #what-we-do.dark-intro::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 420px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background: linear-gradient(
      180deg,
      rgba(116, 97, 244, 0) 0%,
      rgba(111, 93, 235, 0.08) 14%,
      rgba(96, 80, 204, 0.18) 28%,
      rgba(74, 60, 156, 0.34) 42%,
      rgba(48, 38, 97, 0.55) 58%,
      rgba(24, 20, 43, 0.78) 74%,
      rgba(7, 7, 10, 0.94) 90%,
      var(--vivid-deep-black-final) 100%
    ) !important;
  }

  #what-we-do.dark-intro .intro-stage {
    position: relative !important;
    z-index: 4 !important;
    padding-bottom: 360px !important;
  }

  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    height: 420px !important;
    margin-top: -420px !important;
    margin-bottom: -170px !important;
    pointer-events: none !important;
    z-index: 6 !important;
    background: linear-gradient(
      180deg,
      rgba(118, 100, 245, 0) 0%,
      rgba(109, 91, 231, 0.10) 12%,
      rgba(95, 79, 202, 0.22) 24%,
      rgba(74, 59, 154, 0.40) 40%,
      rgba(48, 38, 96, 0.62) 58%,
      rgba(25, 20, 43, 0.82) 74%,
      rgba(8, 8, 11, 0.96) 90%,
      var(--vivid-deep-black-final) 100%
    ) !important;
  }

  /* Also fade over the top of the services section so there is no hard seam */
  #process.section::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -240px !important;
    height: 240px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(
      180deg,
      rgba(90, 73, 190, 0.00) 0%,
      rgba(58, 46, 118, 0.18) 22%,
      rgba(29, 23, 54, 0.45) 48%,
      rgba(10, 10, 13, 0.82) 76%,
      var(--vivid-deep-black-final) 100%
    ) !important;
  }

  /* keep the motion graphic and content above the fade */
  #process.section .services-motion,
  #process.section .services-right,
  #process.section .services-left {
    position: relative !important;
    z-index: 2 !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro::after {
      height: 280px !important;
    }
    #what-we-do.dark-intro .intro-stage {
      padding-bottom: 240px !important;
    }
    .vivid-gradient-black-bridge {
      height: 280px !important;
      margin-top: -280px !important;
      margin-bottom: -120px !important;
    }
    #process.section::before {
      top: -160px !important;
      height: 160px !important;
    }
  }


  :root { --vivid-seam-black: #020202; }

  /* Match the black section and make the gradient darken before the seam, like the reference */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
    background-color: var(--vivid-seam-black) !important;
  }

  /* Dark overlay inside the bottom of the gradient section */
  #what-we-do.dark-intro::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 360px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.00) 0%,
      rgba(2, 2, 2, 0.06) 14%,
      rgba(2, 2, 2, 0.16) 26%,
      rgba(2, 2, 2, 0.34) 40%,
      rgba(2, 2, 2, 0.56) 56%,
      rgba(2, 2, 2, 0.78) 72%,
      rgba(2, 2, 2, 0.92) 86%,
      var(--vivid-seam-black) 100%
    ) !important;
  }

  #what-we-do .intro-stage {
    position: relative !important;
    z-index: 4 !important;
    padding-bottom: 300px !important;
  }

  /* Bridge element overlapping the seam to remove any hard split */
  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    z-index: 9 !important;
    height: 360px !important;
    margin-top: -360px !important;
    margin-bottom: -120px !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.00) 0%,
      rgba(10, 10, 12, 0.10) 16%,
      rgba(10, 10, 12, 0.24) 30%,
      rgba(10, 10, 12, 0.46) 46%,
      rgba(8, 8, 10, 0.68) 62%,
      rgba(5, 5, 6, 0.86) 80%,
      var(--vivid-seam-black) 100%
    ) !important;
  }

  #process.section {
    position: relative !important;
    z-index: 5 !important;
    background: var(--vivid-seam-black) !important;
    margin-top: 0 !important;
    padding-top: 120px !important;
  }

  #process.section::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 160px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.00) 0%,
      rgba(2, 2, 2, 0.20) 28%,
      rgba(2, 2, 2, 0.56) 60%,
      rgba(2, 2, 2, 0.84) 84%,
      var(--vivid-seam-black) 100%
    ) !important;
  }

  #process.section > .inner {
    position: relative !important;
    z-index: 2 !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro::after,
    .vivid-gradient-black-bridge {
      height: 240px !important;
    }

    #what-we-do .intro-stage {
      padding-bottom: 220px !important;
    }

    .vivid-gradient-black-bridge {
      margin-top: -240px !important;
      margin-bottom: -80px !important;
    }

    #process.section {
      padding-top: 90px !important;
    }

    #process.section::before {
      height: 120px !important;
    }
  }


  :root { --vivid-seam-black-final: #020202; }

  /* Kill the visible seam by overlapping black upward into the gradient area */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
  }

  #what-we-do .intro-stage {
    padding-bottom: 220px !important;
  }

  /* Stronger overlap bridge: starts already slightly dark so there is no hard split line */
  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    z-index: 30 !important;
    height: 420px !important;
    margin-top: -420px !important;
    margin-bottom: -140px !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.12) 0%,
      rgba(2, 2, 2, 0.22) 12%,
      rgba(2, 2, 2, 0.36) 26%,
      rgba(2, 2, 2, 0.56) 42%,
      rgba(2, 2, 2, 0.76) 60%,
      rgba(2, 2, 2, 0.90) 78%,
      var(--vivid-seam-black-final) 100%
    ) !important;
  }

  #process.section {
    position: relative !important;
    z-index: 31 !important;
    background: var(--vivid-seam-black-final) !important;
    padding-top: 135px !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  /* Extend the black fade upward over the bottom of the gradient section */
  #process.section::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -260px !important;
    height: 320px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.00) 0%,
      rgba(2, 2, 2, 0.10) 14%,
      rgba(2, 2, 2, 0.28) 30%,
      rgba(2, 2, 2, 0.52) 48%,
      rgba(2, 2, 2, 0.74) 66%,
      rgba(2, 2, 2, 0.90) 84%,
      var(--vivid-seam-black-final) 100%
    ) !important;
  }

  #process.section > .inner {
    position: relative !important;
    z-index: 2 !important;
  }

  @media (max-width: 980px) {
    #what-we-do .intro-stage {
      padding-bottom: 160px !important;
    }

    .vivid-gradient-black-bridge {
      height: 260px !important;
      margin-top: -260px !important;
      margin-bottom: -90px !important;
    }

    #process.section {
      padding-top: 100px !important;
    }

    #process.section::before {
      top: -160px !important;
      height: 210px !important;
    }
  }


  :root { --vivid-deep-black: #020202; }

  /* Disable all prior seam/bridge experiments */
  .vivid-gradient-black-bridge {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #process.section::before,
  #process::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Make the gradient section fade to black inside itself */
  #what-we-do.dark-intro,
  #what-we-do {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #what-we-do.dark-intro::after,
  #what-we-do::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 260px !important;
    pointer-events: none !important;
    z-index: 10 !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0) 0%,
      rgba(2, 2, 2, 0.06) 12%,
      rgba(2, 2, 2, 0.14) 24%,
      rgba(2, 2, 2, 0.28) 40%,
      rgba(2, 2, 2, 0.48) 58%,
      rgba(2, 2, 2, 0.72) 76%,
      rgba(2, 2, 2, 0.90) 90%,
      var(--vivid-deep-black) 100%
    ) !important;
  }

  /* Keep the next section pure black with no separate hard seam */
  #process.section,
  #process {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    background: var(--vivid-deep-black) !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* Ensure inner wrappers don't reintroduce a visible split line */
  #process.section > .inner,
  #process > .inner {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro::after,
    #what-we-do::after {
      height: 190px !important;
    }
  }


  :root { --vivid-deep-black: #020202; }

  /* Remove the top black fade so the gradient section starts cleanly */
  #what-we-do.dark-intro,
  #what-we-do {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--vivid-deep-black) !important;
    background-image:
      radial-gradient(
        circle at 50% 66%,
        rgba(255, 149, 132, 0.94) 0%,
        rgba(228, 157, 198, 0.74) 22%,
        rgba(176, 149, 234, 0.62) 44%,
        rgba(98, 83, 225, 0.90) 72%,
        rgba(32, 24, 84, 1.00) 100%
      ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /* Hard stop at the top: no overlay or top fade */
  #what-we-do.dark-intro::before,
  #what-we-do::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Keep only the bottom fade into the next black section */
  #what-we-do.dark-intro::after,
  #what-we-do::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 260px !important;
    pointer-events: none !important;
    z-index: 10 !important;
    background: linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.00) 0%,
      rgba(2, 2, 2, 0.05) 14%,
      rgba(2, 2, 2, 0.12) 28%,
      rgba(2, 2, 2, 0.24) 42%,
      rgba(2, 2, 2, 0.42) 58%,
      rgba(2, 2, 2, 0.68) 76%,
      rgba(2, 2, 2, 0.88) 90%,
      var(--vivid-deep-black) 100%
    ) !important;
  }

  #what-we-do .intro-stage {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  #process.section,
  #process {
    background: var(--vivid-deep-black) !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro::after,
    #what-we-do::after {
      height: 190px !important;
    }
  }


  :root { --vivid-deep-black-fix: #020202; }

  /* Reset the problematic transition treatments */
  #what-we-do.dark-intro::before,
  #what-we-do.dark-intro::after,
  #process.section::before,
  #process.section::after {
    content: none !important;
    display: none !important;
  }

  /* Gradient section itself */
  #what-we-do.dark-intro {
    position: relative !important;
    overflow: visible !important;
    min-height: 980px !important;
    background-color: var(--vivid-deep-black-fix) !important;
    background-image: radial-gradient(
      circle at 50% 28%,
      rgba(255, 149, 131, 0.92) 0%,
      rgba(228, 156, 199, 0.70) 24%,
      rgba(177, 149, 233, 0.56) 46%,
      rgba(98, 84, 225, 0.88) 76%,
      rgba(24, 20, 66, 1.0) 100%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: inset 0 -180px 180px rgba(2,2,2,0.95) !important;
  }

  #what-we-do.dark-intro .intro-stage {
    position: relative !important;
    z-index: 2 !important;
    min-height: 980px !important;
    padding: 90px 0 260px !important;
    align-items: end !important;
  }

  /* Real visual bridge between the gradient section and the black section */
  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    height: 260px !important;
    margin-top: -260px !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(24,20,66,0.00) 0%,
      rgba(22,18,56,0.18) 12%,
      rgba(18,15,43,0.38) 28%,
      rgba(13,11,29,0.60) 46%,
      rgba(9,8,17,0.80) 64%,
      rgba(5,5,8,0.94) 82%,
      var(--vivid-deep-black-fix) 100%
    ) !important;
  }

  /* Following section stays deep black */
  #process.section {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    padding-top: 90px !important;
    background: var(--vivid-deep-black-fix) !important;
    overflow: hidden !important;
  }

  @media (max-width: 980px) {
    #what-we-do.dark-intro {
      min-height: 820px !important;
    }
    #what-we-do.dark-intro .intro-stage {
      min-height: 820px !important;
      padding: 72px 0 210px !important;
    }
    .vivid-gradient-black-bridge {
      height: 210px !important;
      margin-top: -210px !important;
    }
    #process.section {
      padding-top: 72px !important;
    }
  }


  :root {
    --vivid-black: #020202;
    --vivid-purple-top: #1b1545;
    --vivid-purple-mid: #6857de;
    --vivid-purple-bottom: #171332;
  }

  /* Remove every previous experimental seam overlay */
  #what-we-do.dark-intro::before,
  #what-we-do.dark-intro::after,
  #what-we-do::before,
  #what-we-do::after,
  #process.section::before,
  #process.section::after,
  #process::before,
  #process::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* REAL bridge above the purple section: black -> gradient */
  .vivid-black-gradient-bridge {
    display: block !important;
    height: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        var(--vivid-black) 0%,
        #05040b 18%,
        #0b0920 36%,
        #131038 55%,
        #1d1853 73%,
        #2c2470 88%,
        var(--vivid-purple-top) 100%
      ) !important;
  }

  /* The actual gradient section: no hard black overlays inside it */
  #what-we-do.dark-intro,
  #what-we-do {
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    background-color: var(--vivid-purple-top) !important;
    background-image:
      radial-gradient(
        circle at 50% 48%,
        rgba(255,149,131,.92) 0%,
        rgba(226,150,198,.72) 24%,
        rgba(169,143,231,.62) 48%,
        rgba(103,86,225,.88) 74%,
        var(--vivid-purple-bottom) 100%
      ) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
  }

  #what-we-do .intro-stage {
    position: relative !important;
    z-index: 2 !important;
    min-height: 980px !important;
    padding: 90px 0 240px !important;
    align-items: end !important;
    background: transparent !important;
  }

  /* REAL bridge below the purple section: gradient -> black */
  .vivid-gradient-black-bridge {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    height: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        var(--vivid-purple-bottom) 0%,
        #15112e 14%,
        #100d23 30%,
        #0b0918 48%,
        #07060e 66%,
        #040406 84%,
        var(--vivid-black) 100%
      ) !important;
  }

  /* Services section starts only after the bridge, in pure deep black */
  #process.section,
  #process {
    margin-top: 0 !important;
    padding-top: 88px !important;
    background: var(--vivid-black) !important;
    background-color: var(--vivid-black) !important;
    background-image: none !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #process.section > .inner,
  #process > .inner,
  #process .services-layout,
  #process .services-left,
  #process .services-right,
  #process .services-title,
  #process .services-title h2,
  #process .services-title .eyebrow {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  @media (max-width: 980px) {
    .vivid-black-gradient-bridge {
      height: 260px !important;
    }

    #what-we-do .intro-stage {
      min-height: 820px !important;
      padding: 72px 0 190px !important;
    }

    .vivid-gradient-black-bridge {
      height: 300px !important;
    }

    #process.section,
    #process {
      padding-top: 72px !important;
    }
  }


  :root{
    --vivid-clean-black:#020202;
  }

  /* Kill the experimental bridge strips that are creating visible seams */
  .vivid-black-gradient-bridge,
  .vivid-gradient-black-bridge {
    display:none !important;
  }

  /* Preceding section ends on the exact same black */
  .section-before-whatwedo,
  #use-cases.section-alt,
  #use-cases,
  .section-alt {
    background-color: var(--vivid-clean-black) !important;
  }

  /* Clean reference-like black > glow > black section */
  #what-we-do.dark-intro,
  #what-we-do {
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    background-color: var(--vivid-clean-black) !important;
    background-image:
      radial-gradient(120% 68% at 50% 88%, rgba(255,145,126,.78) 0%, rgba(225,150,198,.58) 24%, rgba(149,132,230,.42) 46%, rgba(84,71,195,.32) 60%, rgba(33,28,74,.18) 72%, rgba(2,2,2,0) 82%),
      radial-gradient(34% 52% at 14% 92%, rgba(99,84,234,.46) 0%, rgba(99,84,234,.18) 44%, rgba(2,2,2,0) 72%),
      radial-gradient(34% 52% at 86% 92%, rgba(99,84,234,.46) 0%, rgba(99,84,234,.18) 44%, rgba(2,2,2,0) 72%),
      linear-gradient(180deg, var(--vivid-clean-black) 0%, #05050a 34%, #090814 52%, #07070d 68%, var(--vivid-clean-black) 100%) !important;
    background-repeat:no-repeat !important;
  }

  /* Black at top and bottom, glow only in middle-lower band */
  #what-we-do.dark-intro::before,
  #what-we-do::before {
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:1 !important;
    background:
      linear-gradient(180deg,
        rgba(2,2,2,1) 0%,
        rgba(2,2,2,0.98) 15%,
        rgba(2,2,2,0.88) 32%,
        rgba(2,2,2,0.36) 48%,
        rgba(2,2,2,0.08) 58%,
        rgba(2,2,2,0.10) 68%,
        rgba(2,2,2,0.42) 82%,
        rgba(2,2,2,0.86) 93%,
        rgba(2,2,2,1) 100%) !important;
  }

  /* Remove every previous seam/fade attempt on this section */
  #what-we-do.dark-intro::after,
  #what-we-do::after {
    content:none !important;
    display:none !important;
    background:none !important;
  }

  #what-we-do .intro-stage {
    position:relative !important;
    z-index:2 !important;
    min-height:900px !important;
    padding:120px 0 170px !important;
    align-items:end !important;
    background:transparent !important;
  }

  #what-we-do .intro-copy,
  #what-we-do .intro-side {
    position:relative !important;
    z-index:3 !important;
  }

  /* Following section begins on the exact same black */
  #process.section,
  #process {
    margin-top: 0 !important;
    padding-top: 86px !important;
    background: var(--vivid-clean-black) !important;
    background-color: var(--vivid-clean-black) !important;
    background-image:none !important;
    position:relative !important;
    z-index:2 !important;
  }

  #process.section .services-title,
  #process.section .services-title h2,
  #process.section .services-left,
  #process.section .services-right,
  #process.section .services-layout,
  #process.section .services-accordion {
    background: transparent !important;
    background-color: transparent !important;
  }

  @media (max-width: 980px){
    #what-we-do .intro-stage {
      min-height: 760px !important;
      padding: 88px 0 130px !important;
    }
  }


  :root{ --vivid-clean-black:#020202; }

  /* Stronger real overlap + bridge fade between gradient section and Services */
  #what-we-do.dark-intro,
  #what-we-do {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  /* top fade into the previous black section */
  #what-we-do.dark-intro::before,
  #what-we-do::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 180px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom,
      rgba(2,2,2,1) 0%,
      rgba(2,2,2,.97) 18%,
      rgba(2,2,2,.82) 42%,
      rgba(2,2,2,.45) 70%,
      rgba(2,2,2,0) 100%) !important;
  }

  /* bottom fade into the following black Services section */
  #what-we-do.dark-intro::after,
  #what-we-do::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 240px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom,
      rgba(2,2,2,0) 0%,
      rgba(2,2,2,.10) 20%,
      rgba(2,2,2,.32) 42%,
      rgba(2,2,2,.62) 65%,
      rgba(2,2,2,.88) 84%,
      rgba(2,2,2,1) 100%) !important;
  }

  /* Pull Services upward so it sits inside the fade rather than starting with a hard cut */
  #process.section,
  #process {
    position: relative !important;
    z-index: 4 !important;
    margin-top: -140px !important;
    padding-top: 226px !important;
    background: var(--vivid-clean-black) !important;
    background-color: var(--vivid-clean-black) !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  /* Transparent top veil on the Services section for a smoother bridge */
  #process.section::before,
  #process::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 180px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(to bottom,
      rgba(2,2,2,0) 0%,
      rgba(2,2,2,.30) 35%,
      rgba(2,2,2,.72) 70%,
      rgba(2,2,2,1) 100%) !important;
  }

  #process > .inner,
  #process .services-layout,
  #process .services-left,
  #process .services-right {
    position: relative !important;
    z-index: 2 !important;
  }

  @media (max-width: 980px){
    #what-we-do.dark-intro::after,
    #what-we-do::after {
      height: 180px !important;
    }
    #process.section,
    #process {
      margin-top: -90px !important;
      padding-top: 150px !important;
    }
    #process.section::before,
    #process::before {
      height: 130px !important;
    }
  }


  :root{ --vivid-bridge-black:#020202; }

  /* kill all older pseudo-fade attempts so only the real bridge divs control the transition */
  #what-we-do::before,
  #what-we-do::after,
  #process::before,
  #process::after,
  #what-we-do.dark-intro::before,
  #what-we-do.dark-intro::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* ensure adjacent sections are the same deep black */
  #use-cases,
  #use-cases.section,
  #use-cases.section-alt,
  #process,
  #process.section {
    background: var(--vivid-bridge-black) !important;
    background-color: var(--vivid-bridge-black) !important;
    background-image: none !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  /* the gradient section itself */
  #what-we-do,
  #what-we-do.dark-intro {
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-color: #3c376f !important;
    background-image:
      radial-gradient(58% 62% at 50% 34%, rgba(255,150,132,.90) 0%, rgba(228,154,203,.72) 30%, rgba(157,142,234,.68) 56%, rgba(106,90,224,.84) 78%, rgba(65,57,123,1) 100%),
      radial-gradient(22% 74% at 12% 46%, rgba(96,82,234,.46) 0%, rgba(96,82,234,0) 72%),
      radial-gradient(22% 74% at 88% 46%, rgba(96,82,234,.46) 0%, rgba(96,82,234,0) 72%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  #what-we-do .intro-stage {
    min-height: 920px !important;
    padding: 110px 0 110px !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  /* actual top bridge: black -> gradient */
  .vivid-black-gradient-bridge {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    height: 220px !important;
    margin: -1px 0 -1px 0 !important;
    pointer-events: none !important;
    background-color: var(--vivid-bridge-black) !important;
    background-image:
      linear-gradient(to bottom,
        rgba(2,2,2,1) 0%,
        rgba(2,2,2,1) 22%,
        rgba(2,2,2,.94) 34%,
        rgba(2,2,2,.72) 48%,
        rgba(2,2,2,.38) 62%,
        rgba(2,2,2,.10) 76%,
        rgba(2,2,2,0) 100%),
      radial-gradient(72% 165% at 50% 100%, rgba(255,146,125,.64) 0%, rgba(229,152,202,.48) 24%, rgba(144,129,231,.42) 48%, rgba(87,74,198,.28) 64%, rgba(0,0,0,0) 84%),
      radial-gradient(24% 150% at 12% 100%, rgba(98,83,236,.46) 0%, rgba(98,83,236,.16) 42%, rgba(0,0,0,0) 74%),
      radial-gradient(24% 150% at 88% 100%, rgba(98,83,236,.46) 0%, rgba(98,83,236,.16) 42%, rgba(0,0,0,0) 74%) !important;
    background-repeat: no-repeat !important;
  }

  /* actual bottom bridge: gradient -> black */
  .vivid-gradient-black-bridge {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    height: 240px !important;
    margin: -1px 0 -1px 0 !important;
    pointer-events: none !important;
    background-color: var(--vivid-bridge-black) !important;
    background-image:
      linear-gradient(to bottom,
        rgba(2,2,2,0) 0%,
        rgba(2,2,2,.05) 12%,
        rgba(2,2,2,.16) 26%,
        rgba(2,2,2,.34) 44%,
        rgba(2,2,2,.58) 62%,
        rgba(2,2,2,.82) 80%,
        rgba(2,2,2,1) 100%),
      radial-gradient(72% 165% at 50% 0%, rgba(255,146,125,.54) 0%, rgba(229,152,202,.40) 22%, rgba(144,129,231,.34) 42%, rgba(87,74,198,.20) 56%, rgba(0,0,0,0) 74%),
      radial-gradient(24% 150% at 12% 0%, rgba(98,83,236,.40) 0%, rgba(98,83,236,.14) 36%, rgba(0,0,0,0) 70%),
      radial-gradient(24% 150% at 88% 0%, rgba(98,83,236,.40) 0%, rgba(98,83,236,.14) 36%, rgba(0,0,0,0) 70%) !important;
    background-repeat: no-repeat !important;
  }

  /* start Services cleanly below the bridge */
  #process,
  #process.section {
    margin-top: 0 !important;
    padding-top: 88px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  #process > .inner,
  #process .services-layout,
  #process .services-left,
  #process .services-right,
  #process .services-title,
  #process .services-title h2,
  #process .services-title .eyebrow {
    background: transparent !important;
    background-image: none !important;
  }

  @media (max-width: 980px){
    .vivid-black-gradient-bridge { height: 160px !important; }
    .vivid-gradient-black-bridge { height: 180px !important; }
    #what-we-do .intro-stage { min-height: 760px !important; padding: 90px 0 90px !important; }
  }


  :root{ --vivid-seamless-black:#050505; }

  /* Turn off all inserted bridge blocks and old pseudo tricks */
  .vivid-black-gradient-bridge,
  .vivid-gradient-black-bridge {
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  #use-cases,
  #use-cases.section,
  #process,
  #process.section {
    background: var(--vivid-seamless-black) !important;
    background-color: var(--vivid-seamless-black) !important;
    background-image: none !important;
    border-top: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #what-we-do,
  #what-we-do.dark-intro {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin: 0 !important;
    background-color: var(--vivid-seamless-black) !important;
    background-image:
      radial-gradient(70% 78% at 50% 56%, rgba(252,149,132,.78) 0%, rgba(221,161,208,.62) 26%, rgba(145,135,225,.68) 52%, rgba(87,77,196,.82) 72%, rgba(30,25,76,1) 100%),
      radial-gradient(18% 72% at 12% 52%, rgba(89,76,236,.48) 0%, rgba(89,76,236,0) 72%),
      radial-gradient(18% 72% at 88% 52%, rgba(89,76,236,.48) 0%, rgba(89,76,236,0) 72%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Seamless top fade from previous black section into the gradient */
  #what-we-do::before,
  #what-we-do.dark-intro::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 260px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(
      to bottom,
      rgba(5,5,5,1) 0%,
      rgba(5,5,5,.97) 14%,
      rgba(5,5,5,.86) 30%,
      rgba(5,5,5,.62) 50%,
      rgba(5,5,5,.32) 72%,
      rgba(5,5,5,.10) 88%,
      rgba(5,5,5,0) 100%
    ) !important;
  }

  /* Seamless bottom fade from gradient back into the next black section */
  #what-we-do::after,
  #what-we-do.dark-intro::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 280px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(
      to bottom,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,.06) 14%,
      rgba(5,5,5,.20) 32%,
      rgba(5,5,5,.44) 54%,
      rgba(5,5,5,.72) 74%,
      rgba(5,5,5,.90) 88%,
      rgba(5,5,5,1) 100%
    ) !important;
  }

  #what-we-do .intro-stage,
  #what-we-do.dark-intro .intro-stage {
    position: relative !important;
    z-index: 3 !important;
    min-height: 920px !important;
    padding: 120px 0 180px !important;
    background: transparent !important;
  }

  /* Ensure the next section starts cleanly and not under the fade */
  #process,
  #process.section {
    margin-top: 0 !important;
    padding-top: 82px !important;
  }

  @media (max-width: 980px){
    #what-we-do::before,
    #what-we-do.dark-intro::before { height: 180px !important; }

    #what-we-do::after,
    #what-we-do.dark-intro::after { height: 200px !important; }

    #what-we-do .intro-stage,
    #what-we-do.dark-intro .intro-stage {
      min-height: 760px !important;
      padding: 88px 0 132px !important;
    }

    #process,
    #process.section { padding-top: 56px !important; }
  }


  :root { --vivid-black-final: #050505; }

  /* Remove all bridge strips and old overlays completely */
  .vivid-black-gradient-bridge,
  .vivid-gradient-black-bridge {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #what-we-do::before,
  #what-we-do::after,
  #what-we-do.dark-intro::before,
  #what-we-do.dark-intro::after,
  #process::before,
  #process::after,
  #process.section::before,
  #process.section::after {
    content: none !important;
    display: none !important;
  }

  /*
    This is the actual fix:
    the black fade is now part of the section background itself,
    not an overlay, not a bridge, not a negative-margin trick.
  */
  #what-we-do,
  #what-we-do.dark-intro {
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-color: var(--vivid-black-final) !important;
    background-image:
      linear-gradient(
        180deg,
        var(--vivid-black-final) 0%,
        rgba(5,5,5,0.96) 7%,
        rgba(5,5,5,0.74) 16%,
        rgba(5,5,5,0.34) 27%,
        rgba(5,5,5,0.00) 39%,
        rgba(5,5,5,0.00) 61%,
        rgba(5,5,5,0.26) 72%,
        rgba(5,5,5,0.58) 82%,
        rgba(5,5,5,0.86) 91%,
        var(--vivid-black-final) 100%
      ),
      radial-gradient(
        76% 74% at 50% 51%,
        rgba(255,149,132,0.86) 0%,
        rgba(224,154,205,0.70) 25%,
        rgba(152,138,230,0.74) 51%,
        rgba(88,76,203,0.90) 75%,
        rgba(31,27,82,1) 100%
      ),
      radial-gradient(
        26% 80% at 10% 50%,
        rgba(89,76,236,0.46) 0%,
        rgba(89,76,236,0.00) 76%
      ),
      radial-gradient(
        26% 80% at 90% 50%,
        rgba(89,76,236,0.46) 0%,
        rgba(89,76,236,0.00) 76%
      ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #what-we-do .intro-stage,
  #what-we-do.dark-intro .intro-stage {
    position: relative !important;
    z-index: 1 !important;
    min-height: 1040px !important;
    padding: 160px 0 230px !important;
    background: transparent !important;
  }

  #process,
  #process.section {
    margin-top: 0 !important;
    padding-top: 88px !important;
    background: var(--vivid-black-final) !important;
    background-color: var(--vivid-black-final) !important;
    background-image: none !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  #process *,
  #process.section * {
    border-top-color: rgba(255,255,255,0.18);
  }

  @media (max-width: 980px) {
    #what-we-do .intro-stage,
    #what-we-do.dark-intro .intro-stage {
      min-height: 820px !important;
      padding: 110px 0 170px !important;
    }
  }


  :root{
    --vivid-deep-black-seam: #030303;
  }

  /* Make the services/process section true deep black to match the motion graphic black */
  #process.section{
    background: var(--vivid-deep-black-seam) !important;
    background-color: var(--vivid-deep-black-seam) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding-bottom: 250px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  /* Remove the old bottom fade that was leaving an evident split */
  #process::after{
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
  }

  /* Start the next section inside the previous one so there is no hard edge */
  #use-cases.section-alt{
    position: relative !important;
    background: var(--vivid-deep-black-seam) !important;
    background-color: var(--vivid-deep-black-seam) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: -150px !important;
    padding-top: 250px !important;
    z-index: 3 !important;
    overflow: hidden !important;
  }

  /* Real bridge fade for this section boundary */
  #use-cases.section-alt::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 240px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
      linear-gradient(
        180deg,
        rgba(3,3,3,0) 0%,
        rgba(3,3,3,0.06) 14%,
        rgba(3,3,3,0.18) 30%,
        rgba(3,3,3,0.38) 50%,
        rgba(3,3,3,0.66) 72%,
        rgba(3,3,3,0.88) 88%,
        rgba(3,3,3,1) 100%
      ) !important;
  }

  #use-cases > .inner{
    position: relative !important;
    z-index: 1 !important;
  }

  /* Ensure the deep black carries behind the title area too */
  #use-cases .eyebrow,
  #use-cases .use-cases-head,
  #use-cases .use-cases-grid,
  #process .services-layout,
  #process .services-left,
  #process .services-right{
    background: transparent !important;
  }

  @media (max-width: 980px){
    #process.section{
      padding-bottom: 210px !important;
    }
    #use-cases.section-alt{
      margin-top: -120px !important;
      padding-top: 195px !important;
    }
    #use-cases.section-alt::before{
      height: 190px !important;
    }
  }


  :root{
    --vivid-layer-black:#030303;
    --vivid-usecase-black:#030303;
  }

  /* Make both sections the exact same black so the motion graphic blends cleanly */
  #process.section,
  #process,
  #use-cases.section-alt,
  #use-cases{
    background: var(--vivid-layer-black) !important;
    background-color: var(--vivid-layer-black) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* Remove older pseudo fades that were causing the visible horizontal band */
  #process::after,
  #process.section::after,
  #use-cases::before,
  #use-cases.section-alt::before{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Keep enough breathing room at the end of Services */
  #process.section,
  #process{
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
    padding-bottom: 320px !important;
  }

  /* Pull Use Cases upward into the same color field instead of starting as a new block */
  #use-cases.section-alt,
  #use-cases{
    position: relative !important;
    overflow: hidden !important;
    z-index: 3 !important;
    margin-top: -260px !important;
    padding-top: 380px !important;
  }

  /* Real transition veil: same black with texture, no visible line */
  #use-cases.section-alt::after,
  #use-cases::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 320px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
      linear-gradient(
        180deg,
        rgba(3,3,3,0) 0%,
        rgba(3,3,3,.18) 22%,
        rgba(3,3,3,.44) 48%,
        rgba(3,3,3,.72) 72%,
        rgba(3,3,3,1) 100%
      ) !important;
  }

  #use-cases > .inner,
  #use-cases .usecases-wrap,
  #use-cases .use-cases-head,
  #use-cases .use-cases-grid{
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  #process > .inner,
  #process .services-layout,
  #process .services-left,
  #process .services-right{
    background: transparent !important;
  }

  @media (max-width: 980px){
    #process.section,
    #process{
      padding-bottom: 230px !important;
    }

    #use-cases.section-alt,
    #use-cases{
      margin-top: -190px !important;
      padding-top: 285px !important;
    }

    #use-cases.section-alt::after,
    #use-cases::after{
      height: 230px !important;
    }
  }


  :root{
    --vivid-boundary-black:#040404;
  }

  /* Force both sections to the exact same deep black */
  #process.section,
  #process,
  #use-cases.section-alt,
  #use-cases{
    background: var(--vivid-boundary-black) !important;
    background-color: var(--vivid-boundary-black) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Kill old seam generators */
  #process::before,
  #process::after,
  #use-cases::before,
  #use-cases::after,
  #use-cases.section-alt::before,
  #use-cases.section-alt::after{
    content: none !important;
    display: none !important;
  }

  /* Create one shared overlap zone between the two sections */
  #process.section{
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    padding-bottom: 180px !important;
  }

  #use-cases.section-alt,
  #use-cases{
    position: relative !important;
    z-index: 1 !important;
    margin-top: -90px !important;
    padding-top: 170px !important;
    overflow: hidden !important;
  }

  /* Real soft boundary bridge: black on black with blur, no hard split */
  .vivid-black-charcoal-bridge{
    display: block !important;
    position: relative !important;
    z-index: 4 !important;
    height: 180px !important;
    margin-top: -90px !important;
    margin-bottom: -90px !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(4,4,4,0) 0%,
      rgba(4,4,4,.32) 18%,
      rgba(4,4,4,.72) 42%,
      rgba(4,4,4,.96) 50%,
      rgba(4,4,4,.72) 58%,
      rgba(4,4,4,.32) 82%,
      rgba(4,4,4,0) 100%
    ) !important;
    filter: blur(18px) !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
  }

  /* Keep content above the blurred bridge */
  #process > .inner,
  #use-cases > .inner{
    position: relative !important;
    z-index: 2 !important;
  }

  @media (max-width: 980px){
    #process.section{
      padding-bottom: 130px !important;
    }

    #use-cases.section-alt,
    #use-cases{
      margin-top: -70px !important;
      padding-top: 130px !important;
    }

    .vivid-black-charcoal-bridge{
      height: 140px !important;
      margin-top: -70px !important;
      margin-bottom: -70px !important;
      filter: blur(14px) !important;
    }
  }


  /* Global responsive safety */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }

  .inner {
    width: min(100% - 48px, 1400px) !important;
    margin-inline: auto !important;
  }

  @media (max-width: 1180px) {
    .inner {
      width: min(100% - 40px, 1100px) !important;
    }

    .hero,
    .hero-inner,
    .hero-grid,
    .intro-stage,
    .services-layout,
    .section-head,
    .use-cases-head,
    .why-grid,
    .video-wrap,
    .cta-box,
    .footer-grid {
      max-width: 100% !important;
    }

    .services-layout {
      grid-template-columns: 1fr 1.05fr !important;
      gap: 52px !important;
    }

    .services-title h2,
    #process .services-title h2 {
      font-size: clamp(82px, 10vw, 150px) !important;
    }

    .services-intro,
    .services-right h3 {
      font-size: clamp(40px, 5vw, 72px) !important;
    }
  }

  @media (max-width: 900px) {
    .inner {
      width: min(100% - 32px, 760px) !important;
    }

    /* Header / nav */
    .nav,
    header,
    .site-header {
      padding-inline: 16px !important;
    }

    .nav-links,
    .nav-actions {
      display: none !important;
    }

    /* Hero */
    .hero,
    .hero-section,
    #hero {
      min-height: auto !important;
      padding-top: 108px !important;
      padding-bottom: 72px !important;
    }

    .hero-grid,
    .hero-inner {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 44px !important;
      align-items: start !important;
    }

    .hero h1,
    .hero-title,
    h1 {
      font-size: clamp(64px, 17vw, 118px) !important;
      line-height: 0.9 !important;
      letter-spacing: -0.075em !important;
      max-width: 100% !important;
    }

    .hero-copy,
    .hero-kicker,
    .hero-sub,
    .hero-text {
      max-width: 100% !important;
    }

    .hero-media,
    .hero-visual,
    .hero-motion {
      width: 100% !important;
      max-width: 560px !important;
      margin: 0 auto !important;
      min-height: 280px !important;
      transform: none !important;
    }

    .hero-media video,
    .hero-visual video,
    .hero-motion video {
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
    }

    /* Gradient statement section */
    #what-we-do.dark-intro,
    #what-we-do {
      min-height: auto !important;
    }

    #what-we-do .intro-stage,
    #what-we-do.dark-intro .intro-stage {
      min-height: 780px !important;
      padding: 118px 0 180px !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      align-content: center !important;
      gap: 44px !important;
    }

    #what-we-do .intro-copy,
    #what-we-do .intro-side {
      width: 100% !important;
      max-width: 100% !important;
      transform: none !important;
    }

    #what-we-do .intro-copy h2,
    #what-we-do h2 {
      font-size: clamp(48px, 11vw, 78px) !important;
      line-height: 0.96 !important;
      letter-spacing: -0.065em !important;
      max-width: 92vw !important;
    }

    #what-we-do .intro-side p,
    #what-we-do p {
      font-size: clamp(22px, 4.6vw, 32px) !important;
      line-height: 1.08 !important;
      max-width: 90vw !important;
      margin-left: 0 !important;
    }

    /* Services / accordion */
    #process.section,
    #process {
      padding-top: 74px !important;
      padding-bottom: 132px !important;
    }

    .services-layout,
    #process .services-layout {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 42px !important;
    }

    .services-left,
    .services-right {
      width: 100% !important;
      max-width: 100% !important;
    }

    .services-title,
    #process .services-title {
      margin-bottom: 30px !important;
      padding: 0 !important;
    }

    .services-title h2,
    #process .services-title h2 {
      font-size: clamp(74px, 18vw, 122px) !important;
      line-height: 0.9 !important;
      letter-spacing: -0.075em !important;
      max-width: 100% !important;
    }

    .services-motion,
    #process .services-motion {
      width: 100% !important;
      aspect-ratio: 1 / 1 !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      background: #030303 !important;
    }

    .services-motion video,
    #process .services-motion video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
    }

    .services-intro,
    #process .services-intro {
      font-size: clamp(34px, 9vw, 58px) !important;
      line-height: 0.98 !important;
      letter-spacing: -0.06em !important;
      margin-bottom: 34px !important;
      max-width: 100% !important;
    }

    .service-toggle,
    #process .service-toggle {
      padding: 24px 0 !important;
      gap: 14px !important;
    }

    .service-toggle span,
    #process .service-toggle span {
      font-size: clamp(32px, 9vw, 50px) !important;
      line-height: 0.95 !important;
      letter-spacing: -0.065em !important;
    }

    .service-index {
      font-size: 13px !important;
      min-width: 34px !important;
    }

    .service-panel-inner p {
      font-size: 16px !important;
      line-height: 1.45 !important;
      max-width: 100% !important;
    }

    /* Use cases */
    #use-cases.section-alt,
    #use-cases {
      margin-top: -70px !important;
      padding-top: 142px !important;
      padding-bottom: 86px !important;
    }

    .section-head,
    .use-cases-head {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 22px !important;
      margin-bottom: 38px !important;
    }

    .section-head h2,
    .use-cases-head h2,
    #use-cases h2 {
      font-size: clamp(50px, 13vw, 84px) !important;
      line-height: 0.95 !important;
      letter-spacing: -0.07em !important;
      max-width: 100% !important;
    }

    .section-head p,
    .use-cases-head p,
    #use-cases .section-head p {
      font-size: 18px !important;
      line-height: 1.32 !important;
      max-width: 100% !important;
    }

    .use-cases,
    .use-cases-grid,
    .industry-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 16px !important;
      width: 100% !important;
      overflow: visible !important;
    }

    .use-card,
    .industry-card {
      min-height: 460px !important;
      width: 100% !important;
      border-radius: 0 !important;
    }

    .use-card img,
    .industry-card img,
    .use-card video,
    .industry-card video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
    }

    .use-card h3,
    .industry-card h3 {
      font-size: clamp(28px, 7.2vw, 42px) !important;
      line-height: 0.95 !important;
    }

    .use-card p,
    .industry-card p {
      font-size: 16px !important;
      line-height: 1.25 !important;
    }

    /* Why Vivid / quality section */
    .why-section,
    #why,
    #why-vivid {
      padding: 74px 0 !important;
    }

    .why-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 30px !important;
    }

    .why-section h2,
    #why h2,
    #why-vivid h2 {
      font-size: clamp(50px, 14vw, 88px) !important;
      line-height: 0.96 !important;
      letter-spacing: -0.07em !important;
    }

    .why-visual,
    .why-video,
    .quality-video {
      width: 100% !important;
      aspect-ratio: 16 / 10 !important;
      height: auto !important;
      min-height: 0 !important;
    }

    .why-points,
    .quality-points {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }

    /* Bottom motion / CTA sections */
    .motion-section,
    .visual-section,
    .cta-section {
      padding: 70px 0 !important;
    }

    .motion-card,
    .visual-card,
    .cta-box {
      width: 100% !important;
      margin-inline: auto !important;
      padding: 28px !important;
      border-radius: 18px !important;
    }

    .motion-card h2,
    .visual-card h2,
    .cta-box h2 {
      font-size: clamp(42px, 12vw, 78px) !important;
      line-height: 0.95 !important;
      letter-spacing: -0.07em !important;
    }

    .marquee,
    .ticker,
    .scroll-text {
      font-size: clamp(34px, 9vw, 64px) !important;
      white-space: nowrap !important;
    }

    footer,
    .footer {
      padding: 48px 0 !important;
    }

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

  @media (max-width: 520px) {
    .inner {
      width: min(100% - 24px, 480px) !important;
    }

    .eyebrow {
      font-size: 12px !important;
      letter-spacing: 0.16em !important;
    }

    .hero,
    .hero-section,
    #hero {
      padding-top: 92px !important;
      padding-bottom: 56px !important;
    }

    .hero h1,
    .hero-title,
    h1 {
      font-size: clamp(56px, 18vw, 86px) !important;
      line-height: 0.9 !important;
    }

    .hero-media,
    .hero-visual,
    .hero-motion {
      min-height: 220px !important;
    }

    #what-we-do .intro-stage,
    #what-we-do.dark-intro .intro-stage {
      min-height: 720px !important;
      padding: 96px 0 148px !important;
    }

    #what-we-do .intro-copy h2,
    #what-we-do h2 {
      font-size: clamp(42px, 13vw, 62px) !important;
    }

    #what-we-do .intro-side p {
      font-size: 21px !important;
      line-height: 1.12 !important;
    }

    .services-title h2,
    #process .services-title h2 {
      font-size: clamp(62px, 21vw, 98px) !important;
    }

    .services-motion,
    #process .services-motion {
      aspect-ratio: 1 / 1 !important;
    }

    .services-intro,
    #process .services-intro {
      font-size: clamp(32px, 10.5vw, 48px) !important;
    }

    .service-toggle span,
    #process .service-toggle span {
      font-size: clamp(28px, 10vw, 42px) !important;
    }

    .section-head h2,
    .use-cases-head h2,
    #use-cases h2 {
      font-size: clamp(44px, 14vw, 68px) !important;
    }

    .use-card,
    .industry-card {
      min-height: 420px !important;
    }

    .motion-card,
    .visual-card,
    .cta-box {
      padding: 22px !important;
    }

    .button,
    .btn,
    button,
    a[class*="button"],
    a[class*="btn"] {
      min-height: 44px !important;
      touch-action: manipulation !important;
    }
  }


  :root{
    --vivid-seamless-black:#040404;
  }

  /* Use one exact black on both sections so there is no color jump */
  #process.section,
  #process,
  #use-cases.section-alt,
  #use-cases{
    background: var(--vivid-seamless-black) !important;
    background-color: var(--vivid-seamless-black) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* Remove the old bridge element that can still read like a line */
  .vivid-black-charcoal-bridge{
    display: none !important;
  }

  /* Let the top section extend farther down */
  #process.section,
  #process{
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    padding-bottom: 220px !important;
  }

  /* Pull the section below upward so both sections share one field */
  #use-cases.section-alt,
  #use-cases{
    position: relative !important;
    z-index: 3 !important;
    margin-top: -170px !important;
    padding-top: 240px !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /* Soft blur/fade zone instead of a visible split line */
  #use-cases.section-alt::before,
  #use-cases::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 220px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(4,4,4,0) 0%,
      rgba(4,4,4,.06) 16%,
      rgba(4,4,4,.20) 34%,
      rgba(4,4,4,.44) 52%,
      rgba(4,4,4,.74) 72%,
      rgba(4,4,4,.94) 88%,
      rgba(4,4,4,1) 100%
    ) !important;
    filter: blur(22px) !important;
    transform: translateY(-18px) scaleY(1.08) !important;
    opacity: 1 !important;
  }

  /* Keep all content above the blur layer */
  #process > .inner,
  #use-cases > .inner{
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 980px){
    #process.section,
    #process{
      padding-bottom: 160px !important;
    }

    #use-cases.section-alt,
    #use-cases{
      margin-top: -120px !important;
      padding-top: 175px !important;
    }

    #use-cases.section-alt::before,
    #use-cases::before{
      height: 165px !important;
      filter: blur(16px) !important;
      transform: translateY(-12px) scaleY(1.06) !important;
    }
  }


  .vivid-contact-footer {
    position: relative;
    background: #030303;
    color: #f2f2f2;
    padding: 120px 0 44px;
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
  }

  .vivid-contact-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(42% 52% at 74% 12%, rgba(211,154,255,.16), rgba(3,3,3,0) 64%),
      radial-gradient(34% 42% at 10% 86%, rgba(112,91,255,.12), rgba(3,3,3,0) 66%);
    opacity: .9;
  }

  .vivid-footer-inner {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1400px);
    margin: 0 auto;
  }

  .vivid-footer-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(48px, 8vw, 130px);
    align-items: start;
  }

  .vivid-footer-brand {
    display: grid;
    gap: 28px;
  }

  .vivid-footer-logo {
    width: 128px;
    height: auto;
    display: block;
    filter: brightness(1.06);
  }

  .vivid-footer-title {
    font-size: clamp(54px, 8vw, 128px);
    line-height: .86;
    letter-spacing: -.075em;
    font-weight: 300;
    max-width: 760px;
    margin: 0;
  }

  .vivid-footer-meta {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    color: rgba(242,242,242,.62);
    font-size: 16px;
    line-height: 1.42;
  }

  .vivid-footer-meta a {
    color: rgba(242,242,242,.84);
    text-decoration: none;
  }

  .vivid-footer-meta a:hover {
    color: #fff;
  }

  .vivid-contact-card {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(18px);
    padding: clamp(24px, 4vw, 42px);
  }

  .vivid-contact-card .eyebrow {
    margin-bottom: 22px;
  }

  .vivid-contact-card h3 {
    font-size: clamp(36px, 5vw, 72px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 300;
    margin: 0 0 28px;
  }

  .vivid-form {
    display: grid;
    gap: 14px;
  }

  .vivid-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .vivid-form input,
  .vivid-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.42);
    color: #fff;
    border-radius: 0;
    padding: 16px 16px;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
  }

  .vivid-form textarea {
    min-height: 140px;
    resize: vertical;
  }

  .vivid-form input::placeholder,
  .vivid-form textarea::placeholder {
    color: rgba(255,255,255,.38);
  }

  .vivid-form input:focus,
  .vivid-form textarea:focus {
    border-color: rgba(218,166,255,.72);
    background: rgba(0,0,0,.58);
  }

  .vivid-form button {
    justify-self: start;
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    background: #daa3ff;
    color: #111;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: 0 18px 48px rgba(218,163,255,.22);
  }

  .vivid-form button:hover {
    transform: translateY(-1px);
  }

  .vivid-form-note {
    color: rgba(255,255,255,.42);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 8px;
  }

  .vivid-footer-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 86px;
    padding-top: 26px;
    color: rgba(255,255,255,.42);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .vivid-contact-footer {
      padding: 86px 0 34px;
    }

    .vivid-footer-inner {
      width: min(100% - 32px, 760px);
    }

    .vivid-footer-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .vivid-footer-logo {
      width: 112px;
    }

    .vivid-footer-title {
      font-size: clamp(50px, 14vw, 92px);
      max-width: 100%;
    }

    .vivid-form-row {
      grid-template-columns: 1fr;
    }

    .vivid-footer-bottom {
      flex-direction: column;
      margin-top: 54px;
    }
  }

  @media (max-width: 520px) {
    .vivid-footer-inner {
      width: min(100% - 24px, 480px);
    }

    .vivid-contact-card {
      padding: 22px;
    }

    .vivid-contact-card h3 {
      font-size: clamp(34px, 12vw, 54px);
    }

    .vivid-form input,
    .vivid-form textarea {
      padding: 14px;
    }
  }


  .mobile-nav { display: none; }

  @media (max-width: 900px) {
    .mobile-nav {
      display: block !important;
      position: fixed !important;
      top: 18px !important;
      right: 18px !important;
      z-index: 999999 !important;
      font-family: inherit !important;
    }

    .mobile-menu-toggle {
      width: 48px !important;
      height: 48px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.18) !important;
      background: rgba(3,3,3,.64) !important;
      backdrop-filter: blur(18px) !important;
      -webkit-backdrop-filter: blur(18px) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
      gap: 7px !important;
      padding: 0 !important;
      cursor: pointer !important;
      box-shadow: 0 14px 42px rgba(0,0,0,.36) !important;
    }

    .mobile-menu-toggle span {
      display: block !important;
      width: 19px !important;
      height: 1px !important;
      background: rgba(255,255,255,.9) !important;
      transform-origin: center !important;
      transition: transform .25s ease, opacity .25s ease !important;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:first-child {
      transform: translateY(4px) rotate(45deg) !important;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:last-child {
      transform: translateY(-4px) rotate(-45deg) !important;
    }

    .mobile-menu-panel {
      position: absolute !important;
      top: 58px !important;
      right: 0 !important;
      min-width: 210px !important;
      padding: 10px !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      background: rgba(5,5,5,.84) !important;
      backdrop-filter: blur(22px) !important;
      -webkit-backdrop-filter: blur(22px) !important;
      box-shadow: 0 24px 80px rgba(0,0,0,.48) !important;
      opacity: 0 !important;
      transform: translateY(-8px) scale(.98) !important;
      pointer-events: none !important;
      transition: opacity .22s ease, transform .22s ease !important;
    }

    .mobile-menu-panel[aria-hidden="false"] {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      pointer-events: auto !important;
    }

    .mobile-menu-panel a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 14px 14px !important;
      color: rgba(255,255,255,.9) !important;
      text-decoration: none !important;
      font-size: 15px !important;
      line-height: 1 !important;
      letter-spacing: -.01em !important;
      border-bottom: 1px solid rgba(255,255,255,.075) !important;
    }

    .mobile-menu-panel a:last-child { border-bottom: 0 !important; }

    .mobile-menu-panel a::after {
      content: "↗" !important;
      font-size: 13px !important;
      color: rgba(255,255,255,.38) !important;
    }

    /* Center mobile header/hero title and tighten spacing */
    .hero,
    .hero-section,
    #hero {
      text-align: center !important;
      padding-top: 92px !important;
      padding-bottom: 48px !important;
    }

    .hero-inner,
    .hero-grid {
      justify-items: center !important;
      gap: 20px !important;
    }

    .hero h1,
    .hero-title,
    #hero h1 {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 9em !important;
      line-height: .88 !important;
      letter-spacing: -.082em !important;
    }

    .hero .eyebrow,
    #hero .eyebrow {
      text-align: center !important;
      justify-content: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .hero-media,
    .hero-visual,
    .hero-motion {
      margin-top: 6px !important;
      margin-bottom: 10px !important;
    }

    /* Left-align text under the motion graphic */
    .hero-text,
    .hero-copy,
    .hero-sub,
    .hero-description,
    #hero .hero-text,
    #hero .hero-copy,
    #hero .hero-sub,
    #hero .hero-description,
    .hero-grid > *:last-child,
    .hero-grid > *:last-child p,
    .hero-inner > *:last-child,
    .hero-inner > *:last-child p {
      text-align: left !important;
      justify-self: stretch !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      max-width: 100% !important;
    }

    /* Footer CTA not duplicated and cleaner on mobile */
    .vivid-footer-title {
      font-size: clamp(42px, 12.5vw, 76px) !important;
      max-width: 9.8em !important;
      line-height: .9 !important;
      letter-spacing: -.075em !important;
    }
  }

  @media (max-width: 520px) {
    .mobile-nav {
      top: 14px !important;
      right: 14px !important;
    }

    .mobile-menu-toggle {
      width: 44px !important;
      height: 44px !important;
    }

    .mobile-menu-panel {
      top: 54px !important;
      min-width: 195px !important;
    }

    .hero,
    .hero-section,
    #hero {
      padding-top: 82px !important;
      padding-bottom: 42px !important;
    }

    .hero h1,
    .hero-title,
    #hero h1 {
      font-size: clamp(52px, 16vw, 76px) !important;
      max-width: 8.8em !important;
    }

    .hero-inner,
    .hero-grid {
      gap: 16px !important;
    }

    .vivid-footer-title {
      font-size: clamp(40px, 13vw, 64px) !important;
    }
  }


  #use-cases.sector-showcase {
    background: #040404 !important;
    background-color: #040404 !important;
    padding-top: clamp(96px, 9vw, 150px) !important;
    padding-bottom: clamp(92px, 9vw, 145px) !important;
  }

  #system-use-cases.section-alt {
    background: #040404 !important;
    background-color: #040404 !important;
  }

  @media (max-width: 900px) {
    #use-cases.sector-showcase {
      padding-top: 78px !important;
      padding-bottom: 78px !important;
    }

    #system-use-cases.section-alt {
      padding-top: 74px !important;
    }
  }


  .hero-highlight {
    color: #daa3ff;
  }

  @media (max-width: 900px) {
    .top-shell .hero,
    .inner.hero,
    section.top-shell .hero {
      text-align: left !important;
      justify-items: start !important;
      align-items: start !important;
      padding-left: 24px !important;
      padding-right: 24px !important;
      padding-top: 96px !important;
      padding-bottom: 68px !important;
    }

    .top-shell .hero-left,
    .top-shell .hero-right,
    .hero-left,
    .hero-right {
      width: 100% !important;
      justify-self: stretch !important;
      align-self: start !important;
    }

    .top-shell h1,
    .top-shell .hero-main-title,
    .top-shell .hero h1,
    .hero-main-title,
    .hero h1,
    #top h1 {
      text-align: left !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      max-width: 7.6em !important;
      font-size: clamp(78px, 20vw, 124px) !important;
      line-height: .86 !important;
      letter-spacing: -.085em !important;
    }

    .top-shell .hero-support,
    .top-shell .hero-support p,
    .top-shell .hero-support-kicker,
    .top-shell .hero-actions,
    .hero-support,
    .hero-support p,
    .hero-support-kicker,
    .hero-actions {
      text-align: left !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }

    .hero-support {
      max-width: 100% !important;
      margin-top: 78px !important;
    }

    .hero-support p {
      font-size: clamp(24px, 6.2vw, 34px) !important;
      line-height: 1.15 !important;
      letter-spacing: -.055em !important;
      max-width: 11.8em !important;
    }

    .hero-support-kicker {
      font-size: 14px !important;
      letter-spacing: .16em !important;
      margin-bottom: 22px !important;
    }

    .hero-btn {
      font-size: 14px !important;
      padding: 18px 30px !important;
    }
  }

  @media (max-width: 520px) {
    .top-shell .hero,
    .inner.hero,
    section.top-shell .hero {
      padding-left: 22px !important;
      padding-right: 22px !important;
      padding-top: 92px !important;
    }

    .top-shell h1,
    .top-shell .hero-main-title,
    .top-shell .hero h1,
    .hero-main-title,
    .hero h1,
    #top h1 {
      font-size: clamp(72px, 21vw, 104px) !important;
      max-width: 7.2em !important;
    }

    .hero-support {
      margin-top: 74px !important;
    }

    .hero-support p {
      font-size: clamp(23px, 6.8vw, 31px) !important;
      max-width: 12em !important;
    }
  }


  @media (max-width: 900px) {
    body.mobile-menu-open {
      overflow: hidden !important;
      touch-action: none !important;
    }

    .mobile-nav {
      display: block !important;
      position: fixed !important;
      top: 22px !important;
      right: 22px !important;
      z-index: 999999 !important;
      font-family: inherit !important;
    }

    .mobile-menu-toggle {
      width: 58px !important;
      height: 58px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.22) !important;
      background: rgba(8,8,8,.42) !important;
      backdrop-filter: blur(18px) !important;
      -webkit-backdrop-filter: blur(18px) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
      gap: 8px !important;
      padding: 0 !important;
      cursor: pointer !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 52px rgba(0,0,0,.34) !important;
    }

    .mobile-menu-toggle span {
      width: 23px !important;
      height: 1px !important;
      background: rgba(255,255,255,.92) !important;
      display: block !important;
      transition: transform .28s ease, opacity .28s ease !important;
    }

    .mobile-menu-toggle[aria-expanded="true"] {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .mobile-menu-panel {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      min-width: 0 !important;
      padding: clamp(12px, 3.4vw, 24px) !important;
      background: #e9e9e7 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: none !important;
      transition: opacity .28s ease, visibility .28s ease !important;
      z-index: 1000000 !important;
      overflow: hidden !important;
    }

    .mobile-menu-panel[aria-hidden="false"] {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    .mobile-menu-frame {
      position: relative !important;
      width: min(100%, 430px) !important;
      height: 100% !important;
      margin: 0 auto !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 28%),
        #111111 !important;
      border: 2px solid rgba(255,255,255,.92) !important;
      outline: 1px solid rgba(0,0,0,.22) !important;
      color: #f7f7f7 !important;
      box-shadow: 0 24px 90px rgba(0,0,0,.18) !important;
      display: grid !important;
      grid-template-rows: auto 1fr !important;
    }

    .mobile-menu-frame::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      background:
        radial-gradient(72% 52% at 44% 20%, rgba(255,255,255,.026), rgba(255,255,255,0) 68%),
        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.018)) !important;
      opacity: .9 !important;
    }

    .mobile-menu-top {
      position: relative !important;
      z-index: 2 !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 22px 18px 0 !important;
      font-size: 16px !important;
      line-height: 1 !important;
      letter-spacing: -.02em !important;
    }

    .mobile-menu-brand,
    .mobile-menu-action {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      color: rgba(255,255,255,.94) !important;
      white-space: nowrap !important;
    }

    .mobile-menu-mark {
      width: 27px !important;
      height: 18px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 30px !important;
      line-height: .72 !important;
      color: #9f69ff !important;
      filter: drop-shadow(0 0 12px rgba(159,105,255,.48)) !important;
      font-family: Arial, sans-serif !important;
      transform: translateY(-1px) !important;
    }

    .mobile-menu-action a {
      color: rgba(255,255,255,.94) !important;
      text-decoration: none !important;
      font-size: 16px !important;
      line-height: 1 !important;
      padding: 0 !important;
      border: 0 !important;
    }

    .mobile-menu-action a::after {
      content: none !important;
    }

    .mobile-menu-close {
      width: 34px !important;
      height: 34px !important;
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
      display: inline-grid !important;
      place-items: center !important;
      cursor: pointer !important;
      position: relative !important;
    }

    .mobile-menu-close::before,
    .mobile-menu-close::after {
      content: "" !important;
      position: absolute !important;
      width: 18px !important;
      height: 1px !important;
      background: rgba(255,255,255,.9) !important;
    }

    .mobile-menu-close::before {
      transform: rotate(45deg) !important;
    }

    .mobile-menu-close::after {
      transform: rotate(-45deg) !important;
    }

    .mobile-menu-close span {
      display: none !important;
    }

    .mobile-menu-list {
      position: relative !important;
      z-index: 2 !important;
      align-self: end !important;
      display: grid !important;
      padding: 0 0 clamp(72px, 13vh, 122px) !important;
      margin: 0 !important;
    }

    .mobile-menu-list a {
      min-height: clamp(52px, 8.5vh, 68px) !important;
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      align-items: center !important;
      gap: 22px !important;
      padding: 0 18px !important;
      border-top: 1px solid rgba(255,255,255,.045) !important;
      border-bottom: 1px solid rgba(0,0,0,.22) !important;
      text-decoration: none !important;
      color: rgba(255,255,255,.34) !important;
      font-size: clamp(26px, 7.2vw, 34px) !important;
      line-height: .95 !important;
      letter-spacing: -.055em !important;
      font-weight: 300 !important;
      background: rgba(255,255,255,.006) !important;
    }

    .mobile-menu-list a:hover,
    .mobile-menu-list a:active {
      color: rgba(255,255,255,.74) !important;
      background: rgba(255,255,255,.018) !important;
    }

    .mobile-menu-list a::after {
      content: none !important;
    }

    .mobile-menu-list em {
      font-style: normal !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
      font-size: 10px !important;
      letter-spacing: -.02em !important;
      color: rgba(255,255,255,.52) !important;
      align-self: center !important;
      transform: translateY(2px) !important;
    }
  }

  @media (max-width: 520px) {
    .mobile-nav {
      top: 20px !important;
      right: 20px !important;
    }

    .mobile-menu-toggle {
      width: 58px !important;
      height: 58px !important;
    }

    .mobile-menu-panel {
      padding: 10px !important;
    }

    .mobile-menu-frame {
      width: 100% !important;
      border-radius: 12px !important;
    }

    .mobile-menu-top {
      padding: 21px 17px 0 !important;
      font-size: 15px !important;
    }

    .mobile-menu-list {
      padding-bottom: clamp(68px, 12vh, 108px) !important;
    }

    .mobile-menu-list a {
      font-size: clamp(26px, 7.4vw, 32px) !important;
      min-height: clamp(54px, 8vh, 66px) !important;
      padding-inline: 18px !important;
    }
  }


  @media (max-width: 900px) {
    html,
    body {
      background: #000 !important;
      background-color: #000 !important;
      overscroll-behavior: none !important;
    }

    body::before,
    body::after {
      content: "" !important;
      position: fixed !important;
      left: 0 !important;
      width: 100vw !important;
      height: 32px !important;
      background: #000 !important;
      z-index: 999998 !important;
      pointer-events: none !important;
    }

    body::before {
      top: 0 !important;
    }

    body::after {
      bottom: 0 !important;
    }

    body.mobile-menu-open::before,
    body.mobile-menu-open::after {
      z-index: 1000002 !important;
      background: #000 !important;
    }

    .mobile-nav {
      top: 20px !important;
      right: 24px !important;
    }

    .mobile-menu-toggle {
      width: 46px !important;
      height: 46px !important;
      border-radius: 999px !important;
      gap: 6px !important;
      border-color: rgba(255,255,255,.22) !important;
      background: rgba(4,4,4,.62) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 12px 36px rgba(0,0,0,.42) !important;
    }

    .mobile-menu-toggle span {
      width: 20px !important;
    }

    .mobile-menu-panel {
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      padding: 0 !important;
      background: #000 !important;
      background-color: #000 !important;
      overflow: hidden !important;
    }

    .mobile-menu-frame {
      width: 100vw !important;
      max-width: none !important;
      height: 100dvh !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      background:
        radial-gradient(72% 52% at 50% 22%, rgba(255,255,255,.025), rgba(255,255,255,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 38%),
        #0b0b0b !important;
      box-shadow: none !important;
    }

    .mobile-menu-frame::before {
      inset: 0 !important;
      background:
        radial-gradient(80% 48% at 50% 14%, rgba(255,255,255,.018), rgba(255,255,255,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0) 45%) !important;
      opacity: 1 !important;
    }

    .mobile-menu-top {
      padding: max(24px, env(safe-area-inset-top)) 24px 0 !important;
    }

    .mobile-menu-list {
      padding-bottom: max(78px, calc(env(safe-area-inset-bottom) + 76px)) !important;
    }

    .mobile-menu-list a {
      border-top: 1px solid rgba(255,255,255,.055) !important;
      border-bottom: 1px solid rgba(0,0,0,.42) !important;
      background: rgba(255,255,255,.006) !important;
    }
  }

  @media (max-width: 520px) {
    .mobile-nav {
      top: 18px !important;
      right: 22px !important;
    }

    .mobile-menu-toggle {
      width: 44px !important;
      height: 44px !important;
      gap: 6px !important;
    }

    .mobile-menu-toggle span {
      width: 19px !important;
    }

    .mobile-menu-top {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }