:root{
      --bg: #0b0b0f;
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --hairline: rgba(255,255,255,.12);

      --maxw: 1100px;
      --pad: clamp(18px, 4vw, 60px);

      /* FIXED TYPE (no viewport scaling) */
      --h2: 76px;  /* desktop + tablet headline */
      --p: 17px;   /* desktop + tablet body */

      /* controls the width of the text column (still flush left) */
      --textw: 550px;
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; overflow-x: hidden; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: var(--bg);
      color: var(--text);
      overflow-x:hidden;
    }

    .nav{
      position:fixed;
      top:0; left:0; width:100%;
      z-index:20;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:28px var(--pad);
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
      transition: background .4s ease, backdrop-filter .4s ease;
    }
    .nav.scrolled{
      background: rgba(0,0,0,.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .nav.scrolled .logo img{
      opacity: .6;
    }
    .brand{
      font-weight:400;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:12px;
      opacity:.9;
    }

    .logo img{
      height: 30px;              /* adjust if needed */
      width: auto;
      display: block;
      opacity: .95;
    }

    .section{
      position:relative;
      min-height:100vh;
      display:grid;
      align-items:center;
      border-bottom:1px solid var(--hairline);
      isolation:isolate;
    }

    .bg-video{
      position:absolute;
      inset:0;
      z-index:-2;
      overflow:hidden;
      background:#000;
    }
    .bg-video video{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      transform:translateZ(0);
    }

    /* Overlay (adjust opacity here if needed) */
    .overlay{
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        radial-gradient(900px 500px at 20% 30%, rgba(0,0,0,.035), rgba(0,0,0,.35)),
        linear-gradient(90deg, rgba(0,0,0,.37), rgba(0,0,0,.15));
    }

    .wrap{
      width:min(var(--maxw), calc(100% - var(--pad) * 2));
      margin:0 auto;
      padding: 30px 0; /* space below fixed nav */
    }

    /* narrower text column (still flush left) */
    .content{
      max-width: var(--textw);
      padding-left: 10px;
    }

    .kicker{
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color: #33bbff;
      margin:0 0 14px 0;
    }

    .headline{
      font-size: var(--h2);
      line-height:1.00;
      margin:0 0 14px 0;
      font-weight: 300;
      letter-spacing: -0.015em;
    }

    .subtext{
      font-size: var(--p);
      line-height:1.55;
      margin:0;
      color: var(--muted);
      font-weight: 300;
    }

    .footer{
      padding: 20px var(--pad);
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .7;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      background: #000;
    }

    .footer-copy,
    .footer-offices{
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: .7;
    }

    /* Mobile — stack vertically */
    @media (max-width: 767.98px){
      .footer{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .footer-email-break{
        display: block;
        margin-bottom: 8px;
      }
      .footer-email{
        display: block;
        margin-top: 8px;
      }
    }

    .cta-outline{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 28px;

      height: 52px;
      padding: 0 32px;

      border: 1px solid rgba(255,255,255,.55);
      color: rgba(255,255,255,.9);
      text-decoration: none;

      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 500;

      transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
    }

    .cta-outline:hover{
      background-color: rgba(255,255,255,.95);
      color: #000;
      border-color: rgba(255,255,255,.95);
    }

    /* PARTNERS BLOCK */
    .section-partners{
      min-height: auto;
      padding: 28px 0 28px;
      background: #000;
    }

    /* Clients block — pinned to bottom of viewport, transparent over hero */
    #block-7{
      background: transparent;
      min-height: auto;
      padding: 40px 0 36px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 5;
    }

    #block-7 .kicker{
      color: var(--muted);
      opacity: .7;
      text-align: center;
    }

    .section-partners .kicker{
      text-align: center;
      color: var(--muted);
      opacity: .7;
      margin-bottom: 32px;
    }

    .partners-content{
      max-width: 100%;
      text-align: center;
    }

    .partners-logos{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 48px;
      align-items: center;
      justify-items: center;
      margin-top: 36px;
    }

    .partners-logos img{
      max-width: 280px;
      width: 100%;
      height: auto;
      margin: 0 auto;
      opacity: .85;
      filter: grayscale(100%);
      transition: opacity .25s ease, filter .25s ease;
      transform: scale(1.15);
    }

    .partners-logos img:hover{
      opacity: 1;
      filter: grayscale(0%);
    }

    .clients-logos{
      grid-template-columns: repeat(8, 1fr);
      gap: 5px;
    }

    .ticker-wrap{ display: none; }

    /* Hero content pushed up so logos show above fold */
    #block-1{
      align-items: flex-start;
      padding-top: 150px;
    }

    @media (min-width: 768px){
      #block-1{
        padding-top: 220px;
      }
    }

    .clients-logos img{
      height: 29px; /* 45px reduced by 35% */
      width: auto;
      max-width: 100%;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: .75;
    }

    @media (min-width: 768px){
      .clients-logos img[alt="Warner Bros"] { height: 37px; }
      .clients-logos img[alt="Rockstar"] { height: 40px; }
      .clients-logos img[alt="SKP"] { height: 40px; }
      .clients-logos img[alt="Olympics"] { height: 37px; }
    }

    .clients-logos img:hover{
      filter: brightness(0) invert(1);
      opacity: 1;
    }

    /* ─── TICKER CAROUSEL — clients logos ─── */
    .ticker-wrap{
      overflow: hidden;
      width: 100%;
      max-width: 100vw;
    }
    .ticker-track{
      display: flex;
      align-items: center;
      gap: 48px;
      width: max-content;
      animation: ticker 28s linear infinite;
    }
    .ticker-track img{
      height: 45px;
      width: auto;
      flex-shrink: 0;
      filter: brightness(0) invert(1);
      opacity: .75;
    }
    .ticker-track img:hover{
      opacity: 1;
    }
    @keyframes ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

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

      /* 1. Hide nav tagline on mobile */
      .nav .brand:not(.logo){ display: none; }

      /* 2. All headlines 55px */
      .headline{ font-size: 55px; }
      .subtext{ font-size: 14.5px; }
      .kicker{ font-size: 10px; }

      /* 3. Fix block-7 overlap — stack below hero naturally */
      #block-1{ min-height: 100vh; padding-bottom: 160px; }
      #block-7{
        position: absolute;
        bottom: 0;
        padding: 0;
      }

      /* 4. Client logos — ticker on mobile, hide static grid */
      .clients-logos{ display: none !important; }
      .ticker-wrap{ display: block; margin-top: 30px; }
      .ticker-track img{ height: 32px; }

      /* Left align partners kicker on mobile */
      .section-partners .kicker{ text-align: left; }

      /* 5. Trusted partners — single scrollable row */
      .partners-logos{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-top: 20px;
      }
      .partners-logos::-webkit-scrollbar{ display: none; }
      .partners-logos img{
        flex-shrink: 0;
        max-width: none;
        width: auto;
        height: 40px;
      }

      /* Footer — offices first, copyright below */
      .footer{
        flex-direction: column;
        align-items: flex-start;
      }
      .footer-copy{ order: 2; }
      .footer-offices{ order: 1; }
    }

    /* Tablet overlay */
    @media (max-width: 900px){
      .overlay{
        background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.40));
      }
      .wrap{ padding: 78px 0; }
      .content{ max-width: 92%; }
    }

    /* Desktop — static grid, no ticker */
    @media (min-width: 768px){
      .ticker-wrap{ display: none; }
      .clients-logos{ display: grid; }
    }


    /* ─── COOKIE BANNER ─── */
    @keyframes slideUp {
      from { transform: translateY(120%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    #cookie-banner{
      position: fixed;
      bottom: 32px;
      right: 32px;
      left: auto;
      transform: none;
      z-index: 999;
      background: rgba(15,15,20,.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.1);
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 300px;
      width: calc(100% - 40px);
      animation: slideUp .5s cubic-bezier(.16,1,.3,1) both;
      animation-delay: .8s;
      opacity: 0;
    }

    #cookie-banner p{
      margin: 0;
      font-size: 12px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.65);
      line-height: 1.6;
    }

    #cookie-policy-text{
      display: none;
      font-size: 11px;
      color: rgba(255,255,255,.45);
      line-height: 1.6;
      margin-top: 4px;
    }

    #cookie-policy-toggle{
      background: none;
      border: none;
      color: rgba(255,255,255,.4);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    #cookie-policy-toggle:hover{
      color: rgba(255,255,255,.7);
    }

    .cookie-actions{
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .cookie-btn{
      height: 38px;
      padding: 0 20px;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,.3);
      background: transparent;
      color: rgba(255,255,255,.7);
      font-family: inherit;
      transition: background .2s ease, color .2s ease;
    }

    .cookie-accept{
      background: rgba(255,255,255,.95);
      color: #000;
      border-color: rgba(255,255,255,.95);
    }

    .cookie-accept:hover{ background: #fff; }
    .cookie-decline:hover{
      background: rgba(255,255,255,.1);
      color: #fff;
    }

    @media (max-width: 767.98px){
      #cookie-banner{
        bottom: 16px;
        right: 16px;
        max-width: calc(100% - 32px);
      }
    }