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

    :root {
      --black: #000000;
      --near: #070707;
      --panel: #0c0c0c;
      --panel2: #121212;
      --line: rgba(255,255,255,0.07);
      --line-2: rgba(255,255,255,0.13);
      --line-3: rgba(255,255,255,0.22);
      --white: #ffffff;
      --g1: #b8b8b8;
      --g2: #767676;
      --g3: #3a3a3a;
      --mono: 'JetBrains Mono', monospace;
      --r: 14px;
      --r-lg: 20px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
      line-height: 1.5;
    }

    ::selection { background: var(--white); color: var(--black); }

    /* ══ AMBIENT LAYERS ══ */
    .grain {
      position: fixed; inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.16;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    }

    .grid-bg {
      position: fixed; inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 88px 88px;
      opacity: 0.4;
      mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 90%);
    }

    .glow-top {
      position: fixed;
      top: -300px; left: 50%;
      transform: translateX(-50%);
      width: 1100px; height: 600px;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.09) 0%, transparent 65%);
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }

    .content { position: relative; z-index: 1; }

    /* ══ NAV ══ */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 40px;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--line);
    }

    .nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }

    .nav-mark {
      width: 28px; height: 28px;
      border-radius: 8px;
      background: linear-gradient(160deg, #2a2a2a, #0a0a0a);
      border: 1px solid var(--line-2);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: 12px; font-weight: 500;
      color: var(--white);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .nav-name { font-size: 14px; font-weight: 500; letter-spacing: -0.2px; color: var(--white); }
    .nav-name span { color: var(--g2); font-weight: 400; }

    .nav-links { display: flex; align-items: center; gap: 30px; }

    .nav-link {
      font-size: 13px; color: var(--g2); text-decoration: none;
      letter-spacing: -0.1px; transition: color 0.2s var(--ease);
    }
    .nav-link:hover { color: var(--white); }

    .nav-cta {
      font-size: 13px; font-weight: 500; color: var(--black);
      background: var(--white); padding: 9px 20px;
      border-radius: 999px; text-decoration: none;
      transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
      box-shadow: 0 0 0 0 rgba(255,255,255,0.25);
    }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -4px rgba(255,255,255,0.35); }

    /* ══ HERO ══ */
    .hero {
      padding: 150px 40px 0;
      max-width: 1280px; margin: 0 auto;
      text-align: center;
    }

    .hero-tag {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--mono); font-size: 10.5px;
      letter-spacing: 1.6px; text-transform: uppercase; color: var(--g1);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      padding: 7px 16px 7px 12px;
      margin-bottom: 36px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      backdrop-filter: blur(10px);
    }

    .pulse {
      width: 5px; height: 5px; border-radius: 50%; background: var(--white);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.16);
      animation: pulse 2.4s infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; box-shadow: 0 0 0 3px rgba(255,255,255,0.16); }
      50% { opacity: 0.45; box-shadow: 0 0 0 6px rgba(255,255,255,0.04); }
    }

    .hero-h1 {
      font-size: clamp(46px, 8vw, 104px);
      font-weight: 600;
      letter-spacing: -4px;
      line-height: 0.95;
      margin-bottom: 28px;
    }

    .hero-h1 .shine {
      background: linear-gradient(180deg, #ffffff 20%, #6e6e6e 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-h1 .outline {
      -webkit-text-stroke: 1px rgba(255,255,255,0.55);
      -webkit-text-fill-color: transparent;
    }

    .hero-p {
      font-size: clamp(15px, 1.6vw, 18.5px);
      color: var(--g1);
      max-width: 540px; margin: 0 auto 40px;
      line-height: 1.65; letter-spacing: -0.2px;
    }

    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--white); color: var(--black);
      padding: 14px 28px; border-radius: 999px;
      font-size: 14px; font-weight: 500; text-decoration: none;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      box-shadow: 0 4px 20px -6px rgba(255,255,255,0.4);
    }
    .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -6px rgba(255,255,255,0.5); }
    .btn-solid .ar { transition: transform 0.3s var(--ease); }
    .btn-solid:hover .ar { transform: translateX(3px); }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 8px;
      border: 1px solid var(--line-2); color: var(--white);
      padding: 14px 28px; border-radius: 999px;
      font-size: 14px; font-weight: 500; text-decoration: none;
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(10px);
      transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .btn-ghost:hover { border-color: var(--line-3); background: rgba(255,255,255,0.06); transform: translateY(-2px); }

    /* ══ REEL STRIP (9:16 overlapping) ══ */
    .reel-wrap {
      margin-top: 88px;
      position: relative;
      padding-bottom: 90px;
    }

    .reel-caption {
      font-family: var(--mono);
      font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
      color: var(--g3); margin-bottom: 34px;
    }

    .reels {
      display: flex; align-items: center; justify-content: center;
      perspective: 1600px;
    }

    .reel {
      position: relative;
      width: 202px;
      aspect-ratio: 9 / 16;
      border-radius: 22px;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--panel2);
      border: 1px solid var(--line-2);
      box-shadow:
        0 30px 60px -20px rgba(0,0,0,0.95),
        0 0 0 1px rgba(255,255,255,0.03),
        inset 0 1px 0 rgba(255,255,255,0.08);
      transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), z-index 0s;
      cursor: pointer;
    }

    .reel video, .reel .ph {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Placeholder shimmer so cards look intentional before videos are added */
    .reel .ph {
      background:
        linear-gradient(150deg, #1c1c1c 0%, #0d0d0d 45%, #202020 100%);
      display: flex; align-items: center; justify-content: center;
    }

    .ph::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.055) 50%, transparent 65%);
      background-size: 220% 100%;
      animation: sweep 4.5s infinite linear;
    }
    @keyframes sweep {
      0% { background-position: 180% 0; }
      100% { background-position: -80% 0; }
    }

    .ph-label {
      position: relative; z-index: 2;
      font-family: var(--mono);
      font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 6px 12px;
      backdrop-filter: blur(6px);
    }

    /* Vignette + label over each reel */
    .reel-shade {
      position: absolute; inset: 0; z-index: 3;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 45%);
      pointer-events: none;
    }

    .reel-meta {
      position: absolute; left: 16px; bottom: 15px; z-index: 4;
      pointer-events: none;
    }

    .reel-client {
      font-size: 12.5px; font-weight: 500; letter-spacing: -0.2px;
      color: #fff; margin-bottom: 3px;
      text-shadow: 0 1px 8px rgba(0,0,0,0.7);
    }

    .reel-type {
      font-family: var(--mono); font-size: 8.5px;
      letter-spacing: 1.3px; text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }

    /* Fanned positions */
    .reel:nth-child(1) { transform: rotate(-9deg) translateX(78px) translateY(30px) scale(0.86); z-index: 1; }
    .reel:nth-child(2) { transform: rotate(-4.5deg) translateX(38px) translateY(8px) scale(0.94); z-index: 2; }
    .reel:nth-child(3) { transform: rotate(0deg) translateY(-10px) scale(1.06); z-index: 5; }
    .reel:nth-child(4) { transform: rotate(4.5deg) translateX(-38px) translateY(8px) scale(0.94); z-index: 2; }
    .reel:nth-child(5) { transform: rotate(9deg) translateX(-78px) translateY(30px) scale(0.86); z-index: 1; }

    .reels:hover .reel { filter: brightness(0.55) saturate(0.8); }
    .reels .reel:hover {
      filter: none;
      z-index: 10;
      box-shadow:
        0 44px 90px -24px rgba(0,0,0,1),
        0 0 0 1px rgba(255,255,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .reels .reel:nth-child(1):hover { transform: rotate(-6deg) translateX(78px) translateY(10px) scale(0.96); }
    .reels .reel:nth-child(2):hover { transform: rotate(-3deg) translateX(38px) translateY(-8px) scale(1.04); }
    .reels .reel:nth-child(3):hover { transform: rotate(0deg) translateY(-22px) scale(1.14); }
    .reels .reel:nth-child(4):hover { transform: rotate(3deg) translateX(-38px) translateY(-8px) scale(1.04); }
    .reels .reel:nth-child(5):hover { transform: rotate(6deg) translateX(-78px) translateY(10px) scale(0.96); }

    .reel-fade {
      position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
      background: linear-gradient(to top, var(--black) 12%, transparent 100%);
      pointer-events: none; z-index: 6;
    }

    /* ══ TRUST BAR ══ */
    .trust {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent);
    }

    .trust-inner {
      max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(4, 1fr);
    }

    .tcell {
      padding: 34px 32px;
      border-right: 1px solid var(--line);
    }
    .tcell:last-child { border-right: none; }

    .tcell-val {
      font-size: 32px; font-weight: 600; letter-spacing: -1.8px;
      line-height: 1; margin-bottom: 9px;
      background: linear-gradient(180deg, #fff 30%, #8a8a8a 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .tcell-label {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 1.8px; text-transform: uppercase; color: var(--g2);
    }

    /* ══ SECTION SHELL ══ */
    .sec {
      padding: 120px 40px;
      max-width: 1280px; margin: 0 auto;
    }
    .sec + .sec { border-top: 1px solid var(--line); }

    .sec-head { margin-bottom: 64px; }

    .sec-num {
      font-family: var(--mono); font-size: 10.5px;
      color: var(--g3); letter-spacing: 2.2px; margin-bottom: 20px;
    }

    .sec-title {
      font-size: clamp(30px, 4.6vw, 58px);
      font-weight: 600; letter-spacing: -2.4px; line-height: 1.02;
      margin-bottom: 22px;
      background: linear-gradient(180deg, #fff 45%, #999 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .sec-sub {
      font-size: 16px; color: var(--g1);
      max-width: 570px; line-height: 1.75; letter-spacing: -0.15px;
    }

    /* ══ CASES ══ */
    .cases { display: flex; flex-direction: column; gap: 18px; }

    .case {
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.026), transparent 40%),
        var(--panel);
      display: grid; grid-template-columns: 1.12fr 1fr;
      overflow: hidden;
      transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
      box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
    }
    .case:hover { border-color: var(--line-2); transform: translateY(-2px); }

    .case-left { padding: 52px; border-right: 1px solid var(--line); }

    .case-badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 1.6px; text-transform: uppercase; color: var(--g2);
      border: 1px solid var(--line-2); border-radius: 999px;
      padding: 6px 13px; margin-bottom: 30px;
      background: rgba(255,255,255,0.025);
    }

    .case-name { font-size: 34px; font-weight: 600; letter-spacing: -1.6px; margin-bottom: 9px; }

    .case-platform {
      font-family: var(--mono); font-size: 11px; color: var(--g2);
      letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 26px;
    }

    .case-desc { font-size: 14.5px; color: var(--g1); line-height: 1.78; margin-bottom: 34px; letter-spacing: -0.1px; }

    .case-work { display: flex; flex-wrap: wrap; gap: 7px; }

    .chip {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.9px; text-transform: uppercase; color: var(--g1);
      border: 1px solid var(--line-2); border-radius: 999px;
      padding: 6px 13px;
      background: rgba(255,255,255,0.025);
      transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
    }
    .case:hover .chip { border-color: var(--line-3); }

    .case-right {
      padding: 52px;
      display: flex; flex-direction: column; justify-content: center;
      background:
        radial-gradient(ellipse 90% 70% at 100% 0%, rgba(255,255,255,0.05) 0%, transparent 60%),
        var(--panel2);
      position: relative;
    }

    .growth-line { display: flex; align-items: baseline; gap: 15px; margin-bottom: 13px; }

    .from-val { font-family: var(--mono); font-size: 21px; font-weight: 400; color: var(--g3); }
    .arrow { font-family: var(--mono); font-size: 17px; color: var(--g3); }

    .to-val {
      font-size: clamp(50px, 6.2vw, 78px);
      font-weight: 700; letter-spacing: -4px; line-height: 1;
      background: linear-gradient(175deg, #fff 30%, #7d7d7d 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .growth-label {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 2px; text-transform: uppercase; color: var(--g2);
      margin-bottom: 38px;
    }

    .case-subgrid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }

    .subcell {
      background: rgba(255,255,255,0.028);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px;
    }

    .subcell-val { font-size: 19px; font-weight: 600; letter-spacing: -0.7px; margin-bottom: 5px; }
    .subcell-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--g2); }

    /* ══ STATEMENT ══ */
    .statement {
      margin-top: 18px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background:
        radial-gradient(ellipse 70% 130% at 90% 50%, rgba(255,255,255,0.05) 0%, transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%),
        var(--panel);
      padding: 66px 58px;
      display: grid; grid-template-columns: 74px 1fr; gap: 20px;
      position: relative; overflow: hidden;
    }

    .statement-mark {
      font-family: var(--mono); font-size: 52px; font-weight: 400;
      color: var(--g3); line-height: 0.8;
    }

    .statement-body { max-width: 730px; }

    .statement-lead {
      font-size: clamp(24px, 3.3vw, 40px);
      font-weight: 600; letter-spacing: -1.8px; line-height: 1.14;
      margin-bottom: 26px;
      background: linear-gradient(180deg, #fff 40%, #a0a0a0 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .statement-text { font-size: 15px; color: var(--g1); line-height: 1.85; margin-bottom: 16px; letter-spacing: -0.12px; }
    .statement-text:last-child { margin-bottom: 0; }
    .statement-text strong { color: var(--white); font-weight: 500; }

    /* ══ SERVICES ══ */
    .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

    .svc {
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(255,255,255,0.024), transparent 42%), var(--near);
      padding: 46px;
      transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
      position: relative; overflow: hidden;
    }
    .svc:hover {
      border-color: var(--line-2); transform: translateY(-3px);
      background: linear-gradient(180deg, rgba(255,255,255,0.045), transparent 45%), var(--panel);
    }

    .svc-idx { font-family: var(--mono); font-size: 10.5px; color: var(--g3); letter-spacing: 2px; margin-bottom: 34px; }
    .svc-name { font-size: 21px; font-weight: 600; letter-spacing: -0.8px; margin-bottom: 14px; }
    .svc-desc { font-size: 14px; color: var(--g1); line-height: 1.75; margin-bottom: 30px; letter-spacing: -0.1px; }

    .svc-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .svc-list li {
      font-family: var(--mono); font-size: 10.5px; color: var(--g2);
      letter-spacing: 0.6px; display: flex; align-items: center; gap: 11px;
      transition: color 0.3s var(--ease);
    }
    .svc:hover .svc-list li { color: var(--g1); }
    .svc-list li::before { content: ''; width: 11px; height: 1px; background: var(--g3); flex-shrink: 0; }

    /* ══ PROCESS ══ */
    .proc { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }

    .proc-step {
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--near);
      padding: 40px;
      transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
    }
    .proc-step:hover { border-color: var(--line-2); transform: translateY(-3px); }

    .proc-num {
      font-family: var(--mono); font-size: 10.5px; color: var(--g3);
      letter-spacing: 2px; margin-bottom: 26px; padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .proc-title { font-size: 17px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 11px; }
    .proc-desc { font-size: 13px; color: var(--g1); line-height: 1.72; letter-spacing: -0.08px; }

    /* ══ CLIENTS ══ */
    .cli-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }

    .cli {
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--near);
      padding: 42px;
      transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
    }
    .cli:hover { border-color: var(--line-2); transform: translateY(-3px); }

    .cli-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--g3); margin-bottom: 22px; }
    .cli-name { font-size: 19px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 11px; }
    .cli-desc { font-size: 13px; color: var(--g1); line-height: 1.72; letter-spacing: -0.08px; }

    /* ══ CTA ══ */
    .cta {
      padding: 150px 40px;
      border-top: 1px solid var(--line);
      text-align: center; position: relative; overflow: hidden;
    }
    .cta::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 46% 78% at 50% 105%, rgba(255,255,255,0.12) 0%, transparent 68%);
      pointer-events: none;
    }

    .cta-inner { position: relative; max-width: 720px; margin: 0 auto; }

    .cta-tag {
      font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.6px;
      text-transform: uppercase; color: var(--g2); margin-bottom: 30px;
    }

    .cta-h {
      font-size: clamp(36px, 5.8vw, 74px);
      font-weight: 600; letter-spacing: -3.4px; line-height: 1;
      margin-bottom: 26px;
    }
    .cta-h .shine {
      background: linear-gradient(180deg, #fff 25%, #7a7a7a 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cta-h .outline { -webkit-text-stroke: 1px rgba(255,255,255,0.55); -webkit-text-fill-color: transparent; }

    .cta-p { font-size: 16px; color: var(--g1); margin-bottom: 42px; line-height: 1.7; letter-spacing: -0.15px; }
    .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    /* ══ FOOTER ══ */
    footer {
      border-top: 1px solid var(--line);
      padding: 46px 40px;
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px;
    }

    .foot-l { display: flex; align-items: center; gap: 12px; }
    .foot-txt { font-size: 12.5px; color: var(--g2); letter-spacing: -0.1px; }
    .foot-txt strong { color: var(--white); font-weight: 500; }

    .foot-r { display: flex; gap: 28px; flex-wrap: wrap; }
    .foot-link {
      font-family: var(--mono); font-size: 10px; color: var(--g2);
      text-decoration: none; letter-spacing: 1.2px;
      transition: color 0.25s var(--ease);
    }
    .foot-link:hover { color: var(--white); }

    /* ══ REVEAL ══ */
    .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .rv.in { opacity: 1; transform: none; }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 1080px) {
      .reel { width: 170px; }
      .reel:nth-child(1) { transform: rotate(-9deg) translateX(66px) translateY(26px) scale(0.86); }
      .reel:nth-child(2) { transform: rotate(-4.5deg) translateX(32px) translateY(7px) scale(0.94); }
      .reel:nth-child(4) { transform: rotate(4.5deg) translateX(-32px) translateY(7px) scale(0.94); }
      .reel:nth-child(5) { transform: rotate(9deg) translateX(-66px) translateY(26px) scale(0.86); }
      .trust-inner { grid-template-columns: repeat(2, 1fr); }
      .tcell:nth-child(2) { border-right: none; }
      .tcell:nth-child(1), .tcell:nth-child(2) { border-bottom: 1px solid var(--line); }
    }

    @media (max-width: 860px) {
      nav { padding: 13px 20px; }
      .nav-links { gap: 16px; }
      .nav-link { display: none; }
      .hero { padding: 124px 20px 0; }
      .hero-h1 { letter-spacing: -2.4px; }
      .reel-wrap { margin-top: 60px; padding-bottom: 60px; }
      .reel { width: 122px; border-radius: 16px; }
      .reel:nth-child(1), .reel:nth-child(5) { display: none; }
      .reel:nth-child(2) { transform: rotate(-6deg) translateX(26px) translateY(6px) scale(0.9); }
      .reel:nth-child(4) { transform: rotate(6deg) translateX(-26px) translateY(6px) scale(0.9); }
      .reels .reel:nth-child(2):hover { transform: rotate(-4deg) translateX(26px) translateY(-6px) scale(0.98); }
      .reels .reel:nth-child(4):hover { transform: rotate(4deg) translateX(-26px) translateY(-6px) scale(0.98); }
      .sec { padding: 76px 20px; }
      .case { grid-template-columns: 1fr; }
      .case-left { border-right: none; border-bottom: 1px solid var(--line); padding: 36px; }
      .case-right { padding: 36px; }
      .statement { padding: 42px 28px; grid-template-columns: 1fr; gap: 12px; }
      .statement-mark { font-size: 34px; }
      .svc, .cli, .proc-step { padding: 32px; }
      .cta { padding: 96px 20px; }
      footer { padding: 34px 20px; }
      .tcell { padding: 26px 20px; }
    }
  

:root{--yellow:#e5ff55}body{background:#080909;color:#f5f6ef}.grain,.glow-top,.grid-bg{display:none}.rv{opacity:1!important;transform:none!important}.content{overflow:hidden}nav{position:relative;background:#080909;padding:25px 5vw;border-bottom:1px solid #333}.nav-mark{background:var(--yellow);color:#10110b;border:0;transform:skew(-9deg);border-radius:3px}.nav-name{font-size:24px}.nav-link,.nav-cta{font-size:14px}.nav-cta{background:var(--yellow);color:#111;border-color:var(--yellow)}.hero{padding:85px 5vw 65px;min-height:auto;text-align:left;align-items:flex-start;max-width:1440px;margin:auto}.hero-tag{font-size:13px;letter-spacing:2px;color:#bac0b6;border:0;padding:0;background:none}.pulse{background:var(--yellow);box-shadow:none}.hero-h1{font-size:clamp(64px,8.7vw,138px);line-height:.98;letter-spacing:-.07em;max-width:1300px;margin-top:30px}.shine{background:none;color:#f3f4ed;-webkit-text-fill-color:initial}.outline{-webkit-text-stroke:0;color:var(--yellow)}.hero-p{margin:30px 0 0;font-size:19px;max-width:560px;color:#a6aba6}.hero-actions{justify-content:flex-start;margin-top:32px}.btn-solid{background:var(--yellow);color:#111;border-color:var(--yellow);border-radius:4px;font-size:15px}.btn-ghost{font-size:15px;border-radius:4px}.hero::before{display:none}.edit-timeline{position:relative;width:100%;margin-top:65px;border:1px solid #393e36;background:#131612;padding:22px;overflow:hidden;border-radius:7px}.timeline-top,.timeline-ruler{display:flex;justify-content:space-between;font:12px monospace;color:#bac0b6;letter-spacing:1px}.timeline-ruler{border-top:1px solid #393e36;margin-top:20px;padding-top:12px}.track{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:8px;margin-top:18px}.track span{background:#e5ff55;color:#151710;padding:20px 16px;font:14px monospace;border-radius:3px}.track span:nth-child(2){background:#a9baa2}.track span:nth-child(3){background:#f3f4ed}.audio-track{margin-top:8px;padding:10px 16px;background:repeating-linear-gradient(90deg,#263c2d 0 4px,#294933 4px 6px);font:12px monospace;color:#d4e8ca}.playhead{position:absolute;top:55px;bottom:10px;width:2px;background:#fff;left:29%;animation:scrub 14s linear infinite;opacity:.7}@keyframes scrub{from{left:6%}to{left:94%}}.trust{background:#e5ff55;color:#10120c}.tcell-val{color:#10120c}.tcell-label{color:#424b2c;font-size:14px}.sec{padding:95px 5vw;max-width:1440px;margin:auto}.sec-num{color:#c4d093;font-size:13px}.sec-title{font-size:clamp(40px,5vw,76px);letter-spacing:-.055em}.sec-sub,.case-desc,.svc-desc,.proc-desc,.cli-desc,.statement-text{font-size:16px;color:#acb2a9}.case{background:#111410;border-radius:5px;border-color:#33392e}.case-name{font-size:34px}.to-val{color:var(--yellow)}.case-badge,.chip{font-size:12px}.svc{background:transparent;border-radius:4px}.svc-name{font-size:26px}.svc-list li{font-size:15px}.proc-title{font-size:23px}.limited{background:var(--yellow);color:#111;max-width:none}.limited .sec-num{color:#3d4829}.limited-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw}.limited h2{font-size:clamp(44px,6vw,90px);font-weight:600;line-height:1.03;letter-spacing:-.06em}.limited em{font-family:Georgia,serif;font-weight:400}.limited p{font-size:18px;margin-bottom:24px;max-width:570px}.limited .btn-solid{background:#111;color:white}.cta{border-top:1px solid #30362c;background:#10130e}.cta-h{font-size:clamp(44px,6.5vw,100px)}.foot-txt,.foot-link{font-size:14px}.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#30362c;border:1px solid #30362c;margin-top:35px}.brand-tile{background:#111410;min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;gap:15px}.brand-tile img{max-height:65px;max-width:160px;object-fit:contain}.brand-tile span{font-size:16px;color:#c3c9bb}.brands-empty{padding:32px 0;color:#a6aba6;border-top:1px solid #30362c;margin-top:30px}.studio-admin{max-width:900px;margin:70px auto;padding:25px}.studio-admin h1{font-size:48px;letter-spacing:-2px}.studio-admin form{margin-top:35px;display:grid;gap:18px}.studio-admin label{display:grid;gap:8px}.studio-admin input{min-height:44px}.studio-admin button{min-height:44px}.admin-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333;padding:20px 0}.admin-row img{width:80px;max-height:50px;object-fit:contain}.admin-message{padding:15px 0;color:#e5ff55}@media(max-width:700px){nav{padding:18px 5vw}.nav-links{gap:16px}.nav-link{display:none}.hero{padding-top:55px}.hero-h1{font-size:clamp(52px,11vw,80px)}.hero-p{font-size:17px}.hero-tag{letter-spacing:1px;font-size:12px}.edit-timeline{padding:12px;margin-top:45px}.track span{padding:15px 8px;font-size:11px}.limited-grid{grid-template-columns:1fr;gap:30px}.sec{padding:65px 6vw}.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-tile{padding:20px 10px}.brand-tile img{max-width:120px}.tcell-val{font-size:30px}.tcell-label{font-size:12px}.case-name{font-size:30px}.foot-r{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.hero-h1 .shine,.cta-h .shine{background:none;-webkit-text-fill-color:#f3f4ed;color:#f3f4ed}.hero-h1 .outline,.cta-h .outline{color:var(--yellow);-webkit-text-stroke:0;outline:0}.hero-h1{max-width:1250px}.nav-link{color:#abb2a4}

.hero-h1 .outline,.cta-h .outline{-webkit-text-fill-color:var(--yellow)}

.trust .tcell-val,.trust .tcell-val *,.trust .tcell-label,.trust .tcell-label *{color:#10120c!important;-webkit-text-fill-color:#10120c!important;background:none!important}.brand-grid{gap:18px;border:0;background:none;grid-template-columns:repeat(4,1fr)}.brand-tile{background:#f6f7ef;border:1px solid #d4d9c8;border-radius:28px;min-height:160px;transition:transform .25s}.brand-tile:hover{transform:translateY(-6px)}.brand-tile img{max-width:170px;max-height:85px;object-fit:contain}.brand-tile span{color:#202819}.best-section{max-width:1440px}.best-heading{display:flex;gap:35px;justify-content:space-between;align-items:flex-end}.best-heading em{font-family:Georgia,serif;color:#e5ff55;font-weight:400}.work-filter{display:flex;gap:10px;flex-wrap:wrap;margin:35px 0}.work-filter button{border:1px solid #49513e;border-radius:100px;background:transparent;color:#cbd0c3;padding:12px 22px;cursor:pointer;font-size:14px}.work-filter button[aria-pressed=true]{background:#e5ff55;color:#10120c;border-color:#e5ff55}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.work-card{border:1px solid #333b2d;border-radius:22px;overflow:hidden;background:#11150e}.work-card:nth-child(3n+2){transform:translateY(30px)}.work-cover{position:relative;aspect-ratio:4/5;width:100%;border:0;background:#20291b;cursor:pointer;display:block}.work-cover img{width:100%;height:100%;object-fit:cover}.work-cover .play{position:absolute;bottom:22px;left:22px;background:#e5ff55;color:#111;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:22px;box-shadow:0 0 0 8px #0002}.work-cover .work-number{position:absolute;top:20px;left:20px;color:#fff;font:14px monospace;background:#0008;border-radius:30px;padding:8px 12px}.work-info{padding:22px}.work-info h3{font-size:23px;margin-bottom:8px}.work-info p{font-size:15px;color:#b4bca9}.work-empty{grid-column:1/-1;padding:50px 30px;border:1px dashed #55613f;border-radius:24px;color:#b4bca9}.best-section{padding-bottom:115px}dialog{margin:auto;width:min(1100px,94vw);max-height:94vh;border:1px solid #455034;border-radius:20px;background:#080909;padding:45px 20px 20px;color:white}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}#close-player{position:absolute;right:12px;top:3px;font-size:32px;background:none;border:0;color:white;cursor:pointer}#player-content video{width:100%;max-height:80vh;display:block}#player-content iframe{width:100%;height:70vh;border:0}a:focus-visible,button:focus-visible{outline:2px solid #e5ff55;outline-offset:4px}@media(max-width:800px){.work-grid{grid-template-columns:repeat(2,1fr)}.work-card:nth-child(3n+2){transform:none}.best-heading{display:block}.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-tile img{max-width:120px}}@media(max-width:500px){.work-grid{grid-template-columns:1fr}.work-cover{aspect-ratio:4/4.5}.tcell-val{font-size:29px}.brand-tile{min-height:130px;border-radius:22px}}

[data-copy]{display:contents}

/* Original supplied logo; CSS changes its display tone for the dark surface. */
.nav-brand,.footer-brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}.versyst-wordmark{display:block;width:178px;height:auto;filter:brightness(0) invert(1);object-fit:contain}.brand-labs{font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:400;line-height:1;color:#9da396;letter-spacing:-.5px}.footer-brand .versyst-wordmark{width:136px}.footer-brand .brand-labs{font-size:21px}.foot-l{flex-wrap:wrap;gap:12px}@media(max-width:600px){.nav-brand{gap:9px}.nav-brand .versyst-wordmark{width:130px}.nav-brand .brand-labs{font-size:21px}.nav-cta{padding:10px 13px;font-size:13px}}@media(max-width:360px){.nav-brand .versyst-wordmark{width:105px}.nav-brand .brand-labs{font-size:19px}.nav-cta{padding:9px 10px;font-size:12px}}

/* Logo lockups: align the visible text bottom with the wordmark. */
.nav-brand,.footer-brand,.admin-brand{align-items:flex-end}.brand-labs{line-height:.76;padding:0;margin-bottom:1px}.foot-l{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.foot-l .foot-txt{display:block;margin:0;color:#aab09f;font-size:14px}.footer-brand .brand-labs{line-height:.76}.loop-shell{position:relative}.loop-viewport{overflow:hidden;width:100%;border-radius:24px}.loop-track{display:flex;width:max-content;gap:0;animation:loop-right var(--loop-duration,45s) linear infinite;will-change:transform}.loop-group{display:flex;gap:22px;padding-right:22px;flex:none}.loop-shell:hover .loop-track,.loop-shell:focus-within .loop-track,.loop-shell.is-paused .loop-track{animation-play-state:paused}.loop-toggle{display:block;margin:15px 0 0 auto;border:1px solid #45503a;background:transparent;color:#c4ceb7;border-radius:30px;padding:9px 16px;font-size:14px;cursor:pointer}.work-grid,.brand-grid{display:block;background:none;border:0}.work-card{width:clamp(220px,23vw,300px);flex:none;transform:none!important;border-radius:28px;overflow:hidden}.work-cover{aspect-ratio:9/16;background:#182013}.work-cover video,.work-cover img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.work-cover .play{width:48px;height:48px;font-size:18px}.work-cover .work-number{font-size:12px}.work-info{padding:18px}.work-info h3{font-size:20px}.work-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.work-tag{font-size:12px;padding:4px 9px;background:#27341c;border:1px solid #3b4b2e;color:#d2e9b6;border-radius:30px}.work-filter{align-items:center}.brand-grid .loop-viewport{border:1px solid #34402a;border-radius:28px;padding:20px 0;background:#11160d}.brand-grid .loop-group{gap:18px;padding-right:18px}.brand-grid .brand-tile{width:170px;height:94px;min-height:94px;flex:none;padding:18px;border-radius:22px;transform:none}.brand-grid .brand-tile img{width:130px;height:58px;max-width:130px;max-height:58px;object-fit:contain}.best-section{padding-bottom:80px}.loop-viewport.is-static{overflow-x:auto}.loop-viewport.is-static .loop-track{animation:none;transform:none;width:max-content}.loop-viewport.is-static .loop-group[aria-hidden=true]{display:none}@keyframes loop-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}@media(prefers-reduced-motion:reduce){.loop-viewport{overflow-x:auto}.loop-track{animation:none!important;transform:none!important}.loop-group[aria-hidden=true]{display:none}.loop-toggle{display:none}}@media(max-width:600px){.work-card{width:240px}.loop-group{gap:16px;padding-right:16px}.brand-grid .brand-tile{width:145px;height:84px;min-height:84px}.brand-grid .brand-tile img{width:110px;height:50px}.loop-viewport{border-radius:20px}}