﻿:root{
      --ink:#0B0B10;
      --paper:#FAFAFC;
      --fog:#F1F3F8;
      --line:rgba(2,6,23,.12);
      --muted:rgba(2,6,23,.62);
      --muted2:rgba(2,6,23,.44);
      --accent:#81D8D0;
      --accent2:#81D8D0;
      --choiceGlowOpacity: 1;

      /* Solid surfaces (avoid color-mix for max compatibility) */
      --paperGlass: rgba(250,250,252,.82);
      --paperGlass2: rgba(250,250,252,.92);
      --fogGlass: rgba(241,243,248,.72);
      --inkGlass: rgba(11,11,16,.92);
      --logoSmall: url("../images/dsk-ru-black.png");
      --logoBanner: url("../images/dsk-ru-black.png");
      --tentacle1: url("../images/tentacles-1.png");
      --tentacle2: url("../images/tentacles-2.png");
    }

    html.dark{
      --ink:#F4F5FA;
      --paper:#0B0B10;
      --fog:#12131A;
      --line:rgba(241,245,249,.14);
      --muted:rgba(241,245,249,.74);
      --muted2:rgba(241,245,249,.58);
      --accent:#81D8D0;
      --accent2:#81D8D0;
      --choiceGlowOpacity: .85;
      --paperGlass: rgba(11,11,16,.72);
      --paperGlass2: rgba(11,11,16,.88);
      --fogGlass: rgba(18,19,26,.72);
      --inkGlass: rgba(244,245,250,.92);
      --logoSmall: url("../images/dsk-ru-white.png");
      --logoBanner: url("../images/dsk-ru-white.png");
      --tentacle1: url("../images/tentacles-white-1.png");
      --tentacle2: url("../images/tentacles-white-2.png");
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      overflow-x:hidden;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
      color: var(--ink);
      position:relative;
      isolation:isolate;
    }
    html.dark body{
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    body[data-mode="brand"]{
      background-color: #F4F5FA;
    }
    html.dark body[data-mode="brand"]{
      background-color: #0B0B10;
    }
    body[data-mode="brand"]::before{
      content:"";
      position:fixed;
      inset:-8%;
      pointer-events:none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
        radial-gradient(1300px 720px at 50% -12%, rgba(129,216,208,.34), transparent 72%),
        radial-gradient(1600px 880px at 50% 120%, rgba(129,216,208,.22), transparent 82%),
        linear-gradient(165deg, rgba(250,250,252,1) 0%, rgba(246,247,251,1) 46%, rgba(241,242,248,1) 100%);
      background-size:140px 140px, 220px 220px, auto, auto, auto;
      background-position:0 0, 90px 140px, center, center, center;
      background-blend-mode: soft-light, soft-light, normal, normal, normal;
      filter: blur(1px) saturate(1.04);
      transform: translateZ(0) scale(1.02);
      z-index:0;
    }
    html.dark body[data-mode="brand"]::before{
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
        radial-gradient(1300px 720px at 50% -12%, rgba(129,216,208,.30), transparent 72%),
        radial-gradient(1600px 880px at 50% 120%, rgba(129,216,208,.20), transparent 82%),
        linear-gradient(165deg, rgba(12,12,18,1) 0%, rgba(10,10,16,1) 52%, rgba(9,9,14,1) 100%);
      background-blend-mode: soft-light, soft-light, normal, normal, normal;
      filter: blur(1px) saturate(1.02);
    }

    html.theme-anim body,
    html.theme-anim .paper,
    html.theme-anim .nav,
    html.theme-anim .card,
    html.theme-anim .btn,
    html.theme-anim .langSwitch,
    html.theme-anim .pill,
    html.theme-anim .choiceScreen,
    html.theme-anim .choiceControlsBar,
    html.theme-anim .hero,
    html.theme-anim .contactBox,
    html.theme-anim .modal,
    html.theme-anim .sheetTop,
    html.theme-anim .sheetBody,
    html.theme-anim .filterBtn,
    html.theme-anim .workCard{
      transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        filter .45s ease;
    }
    a{ color:inherit; text-decoration:none; }
    button{ font-family:inherit; }
    .container{ width:100%; max-width:1120px; margin:0 auto; padding:0 16px; }

    .tentacles-bg{
      position:fixed;
      inset:0;
      pointer-events:none;
      overflow:hidden;
      z-index:0;
    }
    .tentacle{
      position:absolute;
      width:2200px;
      height:2200px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      opacity:0;
      transform: scale(1);
      transition: opacity .8s ease, transform 1.1s ease;
      filter: blur(15px);
      mix-blend-mode:multiply;
      will-change:auto;
    }
    .tentacle.visible{ opacity:.22; will-change: transform, opacity; }
    html.dark .tentacle.visible{ opacity:.12; }
    .tentacle-1{ left:-900px; top:-180px; background-image: var(--tentacle1); }
    .tentacle-2{ right:-980px; top:100px; background-image: var(--tentacle2); }

    @media (max-width: 820px){
      .tentacle{ width:1400px; height:1400px; filter: blur(26px); }
      .tentacle-1{ left:-720px; top:-40px; }
      .tentacle-2{ right:-780px; top:220px; }
    }

    .paper{ min-height:100vh; position:relative; background: var(--paper); }
    .paper::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(1200px 420px at 50% -5%, rgba(0,0,0,.22), transparent 65%),
        radial-gradient(1200px 600px at 50% 110%, rgba(0,0,0,.18), transparent 70%);
      background-repeat:no-repeat;
      background-size:1400px auto;
      background-position:50% -120px;
      opacity:.12;
      filter: grayscale(1) contrast(1.05) blur(6px);
      mix-blend-mode:multiply;
      transform: translateZ(0);
    }
    html.dark .paper::before{ opacity:.10; filter: invert(1) grayscale(1) contrast(1.08); mix-blend-mode:screen; }

    .paper::after{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
      background-size:210px 210px;
      opacity:.12;
      mix-blend-mode:multiply;
    }
    html.dark .paper::after{ opacity:.10; mix-blend-mode:screen; }

    header{ position:sticky; top:12px; z-index:50; }
    body[data-choice="true"] header{ top:58px; }
    header .container{ position:relative; max-width:1248px; }
    .nav{
      margin-top:12px;
      width:100%;
      max-width:100%;
      border:1px solid rgba(197,206,222,.44);
      border-radius:20px;
      background:
        linear-gradient(132deg, rgba(255,255,255,.42), rgba(255,255,255,.2) 38%, rgba(255,255,255,.08) 100%),
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
      backdrop-filter: blur(22px) saturate(1.45);
      -webkit-backdrop-filter: blur(22px) saturate(1.45);
      display:flex;
      align-items:center;
      justify-content:flex-start;
      padding:13px 20px;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      box-shadow:
        0 22px 50px rgba(9,12,24,.16),
        inset 0 1px 0 rgba(255,255,255,.62),
        inset 0 -1px 0 rgba(149,162,186,.24);
    }
    .nav::before{
      content:"";
      position:absolute;
      inset:-1px;
      pointer-events:none;
      background:
        radial-gradient(120% 190% at 8% -25%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 36%, rgba(255,255,255,0) 64%),
        linear-gradient(108deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 30%);
      mix-blend-mode:screen;
      opacity:.64;
    }
    .nav::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.26), rgba(255,255,255,0));
      transform: translateX(-42%);
      filter: blur(8px);
      opacity:.24;
    }
    .nav > *{
      position:relative;
      z-index:1;
    }
    html.dark .nav{
      border-color: rgba(188,198,214,.28);
      background:
        linear-gradient(132deg, rgba(129,216,208,.2), rgba(27,39,54,.24) 42%, rgba(8,12,20,.2) 100%),
        linear-gradient(180deg, rgba(15,24,37,.44), rgba(8,12,20,.28));
      backdrop-filter: blur(18px) saturate(1.16);
      -webkit-backdrop-filter: blur(18px) saturate(1.16);
      box-shadow:
        0 18px 42px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(198,228,223,.2),
        inset 0 -1px 0 rgba(176,188,205,.2);
    }
    html.dark .nav::before{
      background:
        radial-gradient(120% 200% at 10% -30%, rgba(129,216,208,.28) 0%, rgba(202,232,226,.12) 36%, rgba(202,232,226,0) 66%),
        linear-gradient(108deg, rgba(129,216,208,.2) 0%, rgba(129,216,208,0) 30%);
      opacity:.44;
    }
    html.dark .nav::after{
      background: linear-gradient(90deg, rgba(129,216,208,0), rgba(129,216,208,.22), rgba(129,216,208,0));
      opacity:.14;
    }
    .brand{ display:flex; align-items:center; gap:14px; }
    .mark{
      --nav-logo-scale: 1.74;
      display:block;
      flex:0 0 auto;
      position:relative;
      width: 112px; height: 74px; border-radius: 0;
      border: 0;
      background-color: transparent;
      background-image: var(--logoBanner);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      aspect-ratio: 3 / 2;
      box-shadow: none;
      filter: none;
      transform: translateY(2px) scale(var(--nav-logo-scale));
      transform-origin: center center;
      transition: transform .35s ease, filter .35s ease;
    }
    html.dark .mark{
      background-image: var(--logoBanner);
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.36));
    }
    .brand:hover .mark{
      transform: translateY(0) scale(var(--nav-logo-scale));
      filter: none;
    }
    html.dark .brand:hover .mark{
      background-image: var(--logoBanner);
      filter: drop-shadow(0 14px 30px rgba(0,0,0,.44));
    }
    .brandTitle{ font-weight:900; letter-spacing:-0.02em; transition: font-size .35s ease, opacity .35s ease, transform .35s ease; }
    .brandSub{ font-size:12px; margin-top:-2px; color:var(--muted2); overflow:hidden; max-height:20px; transition: opacity .35s ease, max-height .35s ease, transform .35s ease; }

    .links{
      display:none;
      gap:30px;
      font-size:14px;
      color:var(--muted);
      margin-left:0;
    }
    .links a{
      position:relative;
      transition: color .2s ease, opacity .2s ease;
    }
    .links a:hover{ color:var(--ink); }
    .links a[aria-current="page"],
    .links a[aria-current="location"]{
      color:var(--ink);
      font-weight:800;
    }
    .links a[aria-current="page"]::after,
    .links a[aria-current="location"]::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(129,216,208,.16), rgba(129,216,208,.88), rgba(129,216,208,.16));
      box-shadow: 0 0 18px rgba(129,216,208,.18);
    }
    html:not(.dark) .links a[aria-current="page"],
    html:not(.dark) .links a[aria-current="location"]{
      color:#102a32;
    }
    html:not(.dark) .links a[aria-current="page"]::after,
    html:not(.dark) .links a[aria-current="location"]::after{
      height:3px;
      bottom:-11px;
      background: linear-gradient(90deg, rgba(82,188,180,.18), rgba(72,179,172,.98), rgba(82,188,180,.18));
      box-shadow: 0 0 16px rgba(72,179,172,.24);
    }

    .actions{
      display:flex;
      align-items:center;
      gap:12px;
      margin-left:auto;
    }
    .langSwitch{
      display:flex;
      align-items:center;
      gap:4px;
      padding:4px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
    }
    .langBtn{
      border:0;
      background:transparent;
      color:var(--muted);
      font-weight:800;
      font-size:11px;
      padding:6px 10px;
      border-radius:999px;
      cursor:pointer;
      transition: background .2s ease, color .2s ease;
    }
    .langBtn.active{ background: var(--ink); color: var(--paper); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      border-radius:14px;
      padding:10px 14px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      color:var(--ink);
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 55px rgba(17,12,46,.12); }
    .btnPrimary{ background: var(--ink); color: var(--paper); border-color: rgba(0,0,0,.22); }
    html.dark .btnPrimary{ border-color: rgba(255,255,255,.22); }
    .btnPrimary:hover{ opacity:.95; }
    .btnNeutral{
      background: rgba(255,255,255,.025);
      border-color: rgba(168,180,198,.26);
      color: var(--muted2);
    }
    .btnNeutral:hover{
      border-color: rgba(176,189,208,.34);
      background: rgba(255,255,255,.05);
      color: var(--ink);
      box-shadow: 0 12px 30px rgba(11,13,22,.1);
    }
    html.dark .btnNeutral{
      background: rgba(255,255,255,.018);
      border-color: rgba(161,175,196,.22);
      color: rgba(188,198,214,.86);
    }
    html.dark .btnNeutral:hover{
      border-color: rgba(178,192,213,.3);
      background: rgba(255,255,255,.035);
      color: rgba(233,239,250,.95);
    }
    .iconBtn{ width:44px; height:44px; padding:0; }
    .themeToggle{
      position:relative;
      overflow:hidden;
    }
    .themeIconSlot{
      width:18px;
      height:18px;
      display:inline-grid;
      place-items:center;
      position:relative;
      flex:0 0 18px;
    }
    .themeIcon{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      color:currentColor;
      transform-origin:50% 50%;
      transition:
        opacity .34s cubic-bezier(.2,.78,.2,1),
        transform .42s cubic-bezier(.18,.9,.2,1),
        filter .34s ease;
      will-change:auto;
      pointer-events:none;
      z-index:0;
    }
    .themeIconMoon{
      opacity:1;
      transform: rotate(0deg) scale(1);
      filter: blur(0);
    }
    .themeIconMoon path{ fill: currentColor; }
    .themeIconSun{
      opacity:0;
      transform: rotate(-42deg) scale(.58);
      filter: blur(1px);
    }
    .themeIconSun *{
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      vector-effect: non-scaling-stroke;
    }
    .themeIconSun .themeSunCore{
      fill: none;
      stroke-width: 2;
    }
    .themeIconSun .themeSunRays{
      transform-origin: 12px 12px;
      transition: transform .42s cubic-bezier(.18,.9,.2,1), opacity .28s ease;
      opacity:.92;
    }
    .themeToggle.is-dark .themeIconMoon{
      opacity:0;
      transform: rotate(36deg) scale(.62);
      filter: blur(1px);
    }
    .themeToggle.is-dark .themeIconSun{
      opacity:1;
      transform: rotate(0deg) scale(1);
      filter: blur(0);
    }
    .themeToggle.is-dark .themeIconSun .themeSunRays{
      transform: scale(1);
      opacity:1;
    }
    .themeToggle:not(.is-dark) .themeIconSun .themeSunRays{
      transform: scale(.74) rotate(-10deg);
      opacity:.55;
    }
    .themeToggle.is-switching .themeIconSlot{
      animation: themeIconMorphPulse .46s cubic-bezier(.18,.9,.22,1);
    }
    .themeToggle.is-switching .themeIcon{
      will-change: transform, opacity, filter;
    }
    .themeToggle:not(.is-switching) .themeIcon{
      will-change:auto;
    }
    @keyframes themeIconMorphPulse{
      0%{ transform: scale(1) rotate(0deg); }
      38%{ transform: scale(.86) rotate(-8deg); }
      68%{ transform: scale(1.12) rotate(6deg); }
      100%{ transform: scale(1) rotate(0deg); }
    }
    .choiceTheme .themeIconSlot{
      width:16px;
      height:16px;
      flex-basis:16px;
    }

    .mobileMenu{ display:none; border-top:1px solid var(--line); padding:12px 4px 6px; }
    .mobileMenu a{ display:block; padding:10px 12px; border-radius:14px; color:var(--muted); font-weight:700; font-size:13px; }
    .mobileMenu a:hover{ background: var(--fogGlass); color:var(--ink); }

    @media (max-width: 820px){
      .nav{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:8px;
        padding:10px;
        border-radius:16px;
        backdrop-filter: blur(13px) saturate(1.08);
        -webkit-backdrop-filter: blur(13px) saturate(1.08);
      }
      .nav::after{ opacity:.1; }
      .brand{
        flex:0 0 auto;
        min-width:140px;
        gap:8px;
      }
      .mark{
        --nav-logo-scale: 1.7;
        width:92px; height:61px; border-radius:0;
      }
      .brandTitle{
        font-size:13px;
        max-width:38vw;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .brandSub{ display:none; }
      .actions{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:6px;
        flex:0 0 auto;
        margin-left:auto;
        min-width:0;
        justify-content:flex-end;
      }
      .actions .btn{ white-space:nowrap; }
      .nav .btn{ padding:8px 10px; font-size:12px; border-radius:12px; }
      .nav .iconBtn{ width:36px; height:36px; }
      .langSwitch{ padding:3px; }
      .langBtn{ padding:4px 8px; font-size:10px; }
      body[data-mode] .backBtn{
        position:static;
        left:auto;
        top:auto;
        margin-right:0;
        animation:none;
        opacity:1;
        transform:none;
        box-shadow: 0 10px 24px rgba(17,12,46,.12);
      }
      body[data-mode] .backBtn:hover{ transform:none; box-shadow: 0 10px 24px rgba(17,12,46,.12); }
    }
    @media (max-width: 520px){
      .nav{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:4px;
        padding:6px 8px;
        border-radius:14px;
      }
      .nav::before{ opacity:.34; }
      .nav::after{ opacity:.06; }
      .brand{
        flex:0 0 auto;
        min-width:110px;
        gap:6px;
      }
      .mark{
        --nav-logo-scale: 1.64;
        width:78px; height:52px; border-radius:0;
      }
      .brandTitle{
        font-size:11px;
        max-width:34vw;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .brandSub{ display:none; }
      .actions{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:3px;
        flex:0 0 auto;
        margin-left:auto;
        min-width:0;
        justify-content:flex-end;
      }
      .actions .btn{
        padding:3px 6px;
        font-size:9px;
        border-radius:9px;
      }
      .backBtn{ padding:3px 6px; font-size:9px; }
      .langSwitch{ padding:1px; }
      .langBtn{ padding:2px 5px; font-size:8px; }
      .nav .iconBtn{ width:28px; height:28px; }
    }

    main{ padding-top:16px; }
    section{ padding-top:56px; }
    #portfolioFactsSection{ padding-top:18px; }
    #portfolioFactsSection.is-hidden{ display:none; }
    #services{ padding-top:24px; }

    .choiceScreen{
      position:relative;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      text-align:center;
      padding:120px 16px 80px;
      margin-left: calc(50% - 50vw);
      width:100vw;
      background: linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
      border-bottom:1px solid var(--line);
    }
    html.dark .choiceScreen{
      background: linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    .choiceScreen::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(900px 520px at 50% 18%, rgba(129,216,208,.04), transparent 70%),
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.32), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.18), transparent 75%);
      filter: saturate(1.25) contrast(1.08);
      opacity:0;
      animation: choiceGlow 2.6s cubic-bezier(.18,.76,.22,1) .15s forwards;
    }
    html.dark .choiceScreen::after{
      background:
        radial-gradient(900px 520px at 50% 18%, rgba(129,216,208,.03), transparent 70%),
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.30), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.16), transparent 75%);
      filter: saturate(1.15) contrast(1.06);
    }
    .choiceTop{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      gap:10px;
      height:118px;
      margin-top:84px;
      margin-bottom:-20px;
      z-index:2;
      overflow:visible;
    }
    .choiceBrand{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      width:100%;
      height:100%;
      gap:16px;
      cursor:pointer;
      transition: transform .55s ease, filter .55s ease;
      overflow:visible;
    }
    .choiceMark{
      --choice-logo-scale: 1.66;
      --choice-logo-hover-scale: 1.74;
      width:420px; height:280px;
      background-image: var(--logoSmall);
      background-repeat:no-repeat;
      background-position:center;
      background-size: contain;
      aspect-ratio: 3 / 2;
      filter: none;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      backface-visibility: hidden;
      will-change: transform;
      transform-origin:center bottom;
      animation: choiceMarkFloat 6s ease-in-out infinite;
    }
    @keyframes choiceMarkFloat{
      0%,100%{ transform: translate3d(0,0,0) scale(var(--choice-logo-scale)); }
      50%{ transform: translate3d(0,-4px,0) scale(var(--choice-logo-scale)); }
    }
    .choiceBrand:hover .choiceMark{
      animation-play-state: paused;
      transform: translateY(-2px) scale(var(--choice-logo-hover-scale));
    }
    .choiceBrandText{ text-align:center; font-weight:800; letter-spacing:-0.01em; margin-top:10px; }
    .choiceBrandTitle{ font-size:24px; text-transform:none; color:var(--ink); }
    .choiceBrandSub{ display:none; }
    .choiceBrand:hover{ transform: translateY(-2px) scale(1.02); filter: none; }
    .choiceControlsBar{ position:relative; top:0; left:0; right:auto; transform:none; display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 16px; border-radius:999px; background: var(--paperGlass); border:1px solid var(--line); box-shadow: 0 16px 40px rgba(17,12,46,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index:2; width:max-content; max-width:calc(100% - 32px); margin-top:22px; }
    .choiceControls{ display:flex; align-items:center; gap:12px; justify-content:center; }
    .choiceControlRow{ display:flex; align-items:center; }
    .choiceTheme{ padding:10px 14px; font-size:14px; border-radius:999px; }
    .choiceThemeText{ margin-left:6px; }
    .choiceInner{ max-width:820px; width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:0; }
    .choiceTitle{
      font-size: clamp(54px, 6.8vw, 92px);
      font-weight:950;
      letter-spacing:-0.03em;
      margin:0;
    }
    .choiceSub{
      margin-top:8px;
      color:var(--muted);
      font-size:18px;
      line-height:1.55;
    }
    .choiceButtons{
      margin-top:16px;
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      align-items:stretch;
      width:min(440px, 100%);
      margin-left:auto;
      margin-right:auto;
      transform: translateX(0);
    }
    .choiceOption{
      display:block;
      width:100%;
    }
    .choiceBtn{
      min-width:0;
      width:100%;
      min-height:76px;
      padding:9px 12px;
      border-radius:18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      text-align:center;
      box-shadow: 0 6px 14px rgba(17,12,46,.09);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .choiceBtnLabel{
      display:block;
      font-size:20px;
      font-weight:900;
      letter-spacing:-.01em;
      line-height:1.12;
    }
    .choiceBtnHint{
      display:block;
      max-width:95%;
      font-size:14px;
      line-height:1.38;
      color:var(--muted2);
      letter-spacing:0;
      text-align:center;
      text-wrap:balance;
    }
    .choiceBtn.btnPrimary .choiceBtnHint{
      color: currentColor;
      opacity:.72;
    }
    .choiceBtn:hover{
      transform: translateY(-1px);
      border-color: rgba(129,216,208,.45);
      box-shadow:
        0 16px 34px rgba(17,12,46,.18),
        0 0 0 2px rgba(129,216,208,.18),
        0 0 22px rgba(129,216,208,.35);
    }
    html.dark .choiceBtn:hover{
      border-color: rgba(129,216,208,.55);
      box-shadow:
        0 16px 34px rgba(0,0,0,.35),
        0 0 0 2px rgba(129,216,208,.22),
        0 0 24px rgba(129,216,208,.35);
    }
    @media (max-width: 720px){
      .choiceControls{ flex-direction:row; }
      .choiceScreen{ padding:80px 16px 70px; }
      .choiceTop{
        height:98px;
        margin-top:56px;
        margin-bottom:-10px;
      }
      .choiceMark{
        --choice-logo-scale: 1.58;
        --choice-logo-hover-scale: 1.66;
        width:344px;
        height:229px;
      }
      .choiceButtons{
        width:min(440px, 100%);
      }
      .choiceBtn{
        width:100%;
        min-height:78px;
      }
      .choiceControlsBar{
        width:max-content;
        max-width:calc(100% - 32px);
        border-radius:999px;
        padding:10px 16px;
        gap:12px;
        overflow:visible;
      }
      .choiceControls{
        width:auto;
        gap:12px;
      }
      .choiceControlRow{
        width:auto;
        justify-content:center;
        padding:0;
      }
      .choiceControlRow + .choiceControlRow{
        border-top:0;
      }
      .choiceControls .langSwitch{
        width:auto;
      }
      .choiceControls .choiceTheme{
        width:auto;
        justify-content:center;
        border-radius:999px;
      }
      .choiceControls .langBtn{
        border-radius:10px;
      }
    }
    @media (max-width: 420px){
      .choiceTop{
        height:78px;
        margin-top:42px;
        margin-bottom:-2px;
      }
      .choiceMark{
        --choice-logo-scale: 1.5;
        --choice-logo-hover-scale: 1.58;
        width:288px; height:192px;
      }
      .choiceTitle{ font-size: clamp(38px, 9vw, 58px); }
      .choiceSub{ font-size:15px; }
      .choiceButtons{ gap:8px; }
      .choiceBtn{
        min-height:72px;
        padding:8px 10px;
        font-size:16px;
        border-radius:16px;
      }
      .choiceBtnLabel{ font-size:18px; }
      .choiceBtnHint{
        font-size:12.5px;
        line-height:1.34;
      }
      .choiceControlsBar{ padding:8px 12px; }
      .choiceTheme{ padding:8px 12px; font-size:12px; }
    }
    .choiceScreen{ overflow:visible; }
    .choiceScreen::before{
      display:none;
      content:"";
      position:absolute;
      left:50%;
      top:-180px;
      width:120vw;
      height:calc(100% + 260px);
      transform: translateX(-50%);
      background:
        radial-gradient(1100px 520px at 50% 0%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(900px 480px at 15% 10%, rgba(129,216,208,.16), transparent 70%),
        radial-gradient(900px 480px at 85% 10%, rgba(129,216,208,.14), transparent 70%);
      pointer-events:none;
      z-index:0;
    }
    html.dark .choiceScreen::before{
      display:none;
      background:
        radial-gradient(1100px 520px at 50% 0%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(900px 480px at 15% 10%, rgba(129,216,208,.16), transparent 70%),
        radial-gradient(900px 480px at 85% 10%, rgba(129,216,208,.12), transparent 70%);
    }
    .choiceScreen > *{ position:relative; z-index:1; }

    .choiceScreen .choiceTop,
    .choiceScreen .choiceInner,
    .choiceScreen .choiceButtons,
    .choiceScreen .choiceControlsBar{
      animation: choiceReveal 1.35s cubic-bezier(.16,.84,.24,1) both;
    }
    .choiceScreen .choiceTop{ animation-delay: .08s; }
    .choiceScreen .choiceInner{ animation-delay: .18s; }
    .choiceScreen .choiceButtons{ animation-delay: .28s; }
    .choiceScreen .choiceControlsBar{ animation-delay: .36s; }
    @keyframes choiceReveal{
      0%{ opacity:0; transform: translateY(12px) scale(.995); }
      70%{ opacity:1; transform: translateY(-2px) scale(1.002); }
      100%{ opacity:1; transform: translateY(0) scale(1); }
    }
    @keyframes choiceGlow{
      0%{ opacity:0; }
      60%{ opacity:calc(var(--choiceGlowOpacity) * .86); }
      100%{ opacity:var(--choiceGlowOpacity); }
    }
    @media (prefers-reduced-motion: reduce){
      .choiceScreen .choiceTop,
      .choiceScreen .choiceInner,
      .choiceScreen .choiceButtons,
      .choiceScreen .choiceControlsBar{
        animation: none !important;
      }
      .choiceScreen::after{
        animation: none !important;
        opacity: var(--choiceGlowOpacity);
      }
    }
    body[data-choice="true"]{ overflow:hidden; }
    body[data-choice="true"] header{ display:none; }
    body[data-choice="true"] main{ height:100vh; overflow:visible; }
    body[data-choice="true"] .brandSub{ opacity:0; max-height:0; transform: translateY(-4px); }
    body[data-choice="true"] .brandTitle{ font-size:14px; }
    body[data-choice="true"] .mark{
      --nav-logo-scale: 1.66;
      width:72px; height:48px; border-radius:0;
    }
    body[data-choice="true"] .brand{ transform: scale(.92); gap:8px; }
    header .nav{ transition: opacity .7s ease, transform .7s ease, max-width .7s ease, box-shadow .7s ease; transform-origin: top center; }
    header .links, header .actions{ transition: opacity .35s ease, transform .35s ease, max-height .35s ease; }
    header .brand{ transition: transform .35s ease, opacity .35s ease; }

    body[data-mode] header .nav{ transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
body.nav-enter header .nav{ animation: navSlideIn .4s ease both; animation-delay: .12s; }
    @keyframes navSlideIn{
      from{ opacity:0; transform: translateY(-14px); filter: blur(6px); }
      to{ opacity:1; transform: translateY(0); filter: blur(0); }
    }
    
    body[data-mode="author"].enter-stagger .authorOnly,
    body[data-mode="author"].enter-stagger .authorOnly .reveal,
    body[data-mode="author"].enter-stagger .authorOnly .card{
      animation: authorStagger .45s ease both;
    }
@keyframes authorStagger{
      from{ opacity:0; transform: translateY(16px); }
      to{ opacity:1; transform: translateY(0); }
    }
        body[data-mode] .authorOnly,
    body[data-mode] .brandOnly{ transition: opacity .28s ease, transform .28s ease; }
    body.mode-enter .authorOnly,
    body.mode-enter .brandOnly{ opacity:0; transform: translateY(18px); }
    @media (prefers-reduced-motion: reduce){
      body[data-mode] header .nav,
      body[data-mode] .authorOnly,
      body[data-mode] .brandOnly{ transition: none !important; }
      body.mode-enter header .nav,
      body.mode-enter .authorOnly,
      body.mode-enter .brandOnly{ opacity:1 !important; transform:none !important; }
    }
    body[data-choice="true"] .nav{ background: transparent; border-color: transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:6px 8px; transform: translateY(-16px) scale(.9); opacity:0; max-width:260px; }
    body[data-choice="true"] .nav::before,
    body[data-choice="true"] .nav::after{ opacity:0; }
    body[data-choice="true"] .links, body[data-choice="true"] .actions{ opacity:0; pointer-events:none; transform: translateY(-6px); max-height:0; }
    body[data-mode] header{ pointer-events:auto; }
    body[data-mode] .nav{ opacity:1; transform: translateY(0) scale(1); }
    body[data-mode] header .nav{ margin-left:0; width:100%; }
        .links{ max-height:40px; overflow:hidden; }
    .actions{ max-height:72px; overflow:hidden; }
    body[data-mode] .actions{ overflow:visible; }
    body[data-mode="author"] .linksBrand{ display:none; }
    body[data-mode="brand"] .linksAuthor{ display:none; }
    body[data-choice="true"] .authorOnly, body[data-choice="true"] .brandOnly{ display:none; }
    body[data-mode="author"] .brandOnly{ display:none; }
    body[data-mode="brand"] .authorOnly{ display:none; }
    body[data-page-mode] #choiceScreen{ display:none !important; }
    body[data-page-mode]{ overflow:auto; }
    body[data-page-mode="author"] .brandOnly{ display:none; }
    body[data-page-mode="brand"] .authorOnly{ display:none; }
    .backBtn{ display:none; }
    body[data-mode] .backBtn{
      display:inline-flex;
      position:static;
      margin-right:14px;
      z-index:auto;
      padding:11px 18px;
      border-radius:999px;
      background: var(--paperGlass2);
      border:1px solid rgba(176,188,205,.36);
      box-shadow: 0 10px 24px rgba(17,12,46,.14);
      font-weight:800;
      opacity:1;
      transform:none;
      animation:none;
    }
    @keyframes backBtnIn{ to{ opacity:1; transform: translateY(0); } }
    body[data-mode] .backBtn:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(17,12,46,.22); }
    body[data-choice="true"] .backBtn{ display:none; }
    .brandFlow{
      max-width:1240px;
      margin:24px auto 0;
      display:grid;
      gap:18px;
      position:relative;
      isolation:isolate;
    }
    #brand{
      position:relative;
      overflow:visible;
    }
    .brandFlow > *{
      position:relative;
      z-index:1;
    }
    #brand-services,
    #brand-how,
    #brand-portfolio,
    #brand-funnel,
    #brand-contact{
      contain: layout paint;
    }
    @supports (content-visibility: auto){
      #brand-services,
      #brand-how,
      #brand-portfolio,
      #brand-funnel,
      #brand-contact{
        content-visibility:auto;
        contain-intrinsic-size: 760px;
      }
      #brand-contact{
        contain-intrinsic-size: 620px;
      }
    }
    body[data-page-mode] #brand-services,
    body[data-page-mode] #brand-how,
    body[data-page-mode] #brand-portfolio,
    body[data-page-mode] #brand-funnel,
    body[data-page-mode] #brand-contact{
      content-visibility: visible !important;
      contain-intrinsic-size: auto !important;
    }
    .brandBlockAnim{
      scroll-margin-top: 112px;
      opacity:0;
      transform: translate3d(0, 34px, 0) scale(.987);
      filter: blur(7px);
      box-shadow:
        0 0 0 0 rgba(129,216,208,0),
        0 0 0 0 rgba(129,216,208,0),
        0 0 0 0 rgba(129,216,208,0),
        0 0 0 0 rgba(129,216,208,0);
      transition:
        opacity .56s cubic-bezier(.2,.75,.2,1),
        transform .62s cubic-bezier(.2,.75,.2,1),
        filter .62s cubic-bezier(.2,.75,.2,1),
        box-shadow 1.65s cubic-bezier(.16,.84,.22,1);
      transition-delay:
        var(--brand-delay, 0ms),
        var(--brand-delay, 0ms),
        var(--brand-delay, 0ms),
        0ms;
      will-change: transform, opacity, filter;
    }
    .brandBlockAnim.in{
      opacity:1;
      transform: translate3d(0,0,0) scale(1);
      filter: blur(0);
      will-change:auto;
    }
    #brand-intro.brandBlockAnim{
      opacity:1;
      transform:none;
      filter:none;
      will-change:auto;
    }
    #brand-intro.brand-intro-paint-fix{
      outline:1px solid transparent;
      filter:saturate(1);
    }
    .brandBlockAnim.is-on{
      transition:
        opacity .56s cubic-bezier(.2,.75,.2,1),
        transform .62s cubic-bezier(.2,.75,.2,1),
        filter .62s cubic-bezier(.2,.75,.2,1),
        box-shadow .24s cubic-bezier(.12,.78,.2,1);
      transition-delay:0ms,0ms,0ms,0ms;
      box-shadow:
        0 0 0 1px rgba(129,216,208,.10),
        0 0 84px 12px rgba(129,216,208,.14),
        0 0 180px 34px rgba(129,216,208,.11),
        0 0 340px 74px rgba(129,216,208,.08);
    }
    html.dark .brandBlockAnim.is-on{
      transition:
        opacity .56s cubic-bezier(.2,.75,.2,1),
        transform .62s cubic-bezier(.2,.75,.2,1),
        filter .62s cubic-bezier(.2,.75,.2,1),
        box-shadow .24s cubic-bezier(.12,.78,.2,1);
      transition-delay:0ms,0ms,0ms,0ms;
      box-shadow:
        0 0 0 1px rgba(129,216,208,.12),
        0 0 96px 16px rgba(129,216,208,.20),
        0 0 210px 42px rgba(129,216,208,.15),
        0 0 400px 92px rgba(129,216,208,.10);
    }
    .brandInnerAnim{
      opacity:0;
      transform: translate3d(0, 18px, 0);
      filter: blur(4px);
      transition:
        opacity .42s cubic-bezier(.2,.75,.2,1),
        transform .44s cubic-bezier(.2,.75,.2,1),
        filter .4s cubic-bezier(.2,.75,.2,1);
      transition-delay: calc(var(--brand-delay, 0ms) + var(--brand-inner-delay, 0ms));
      will-change: transform, opacity, filter;
    }
    .brandBlockAnim.in .brandInnerAnim{
      opacity:1;
      transform: translate3d(0,0,0);
      filter: blur(0);
      will-change:auto;
    }
    .brandServicesCardAnim{
      opacity:0;
      transform: translate3d(0, 30px, 0) scale(.988);
      filter: blur(7px);
      transition:
        opacity .54s cubic-bezier(.2,.75,.2,1),
        transform .6s cubic-bezier(.2,.75,.2,1),
        filter .52s cubic-bezier(.2,.75,.2,1);
      transition-delay: var(--brand-services-card-delay, 0ms);
      will-change: transform, opacity, filter;
    }
    .brandServicesCardAnim.in{
      opacity:1;
      transform: translate3d(0,0,0) scale(1);
      filter: blur(0);
      will-change:auto;
    }
    .brandTentacles{
      --brandTentaclesShiftY: 0px;
      --brandTentaclesScale: 1;
      position:absolute;
      inset:-160px -260px -180px;
      width:calc(100% + 520px);
      height:calc(100% + 340px);
      pointer-events:none;
      z-index:0;
      opacity:0;
      mix-blend-mode:multiply;
      filter: blur(.15px);
      transform: translate3d(0, var(--brandTentaclesShiftY), 0) scale(var(--brandTentaclesScale));
      transform-origin:50% 50%;
      transition: transform .26s ease-out;
    }
    html.dark .brandTentacles{
      opacity:0;
      mix-blend-mode:screen;
    }
    .brandTentacles path{
      fill:none;
      stroke: url(#brandTentacleGradient);
      stroke-linecap:round;
      transform-box:fill-box;
      transform-origin:center;
      transition: transform .32s ease-out, opacity .3s ease-out;
    }
    .brandTentacles path:nth-child(2){ opacity:.82; stroke-width:14; }
    .brandTentacles path:nth-child(3){ opacity:.66; stroke-width:12; }
    .brandTentacles path:nth-child(4){ opacity:.52; stroke-width:10; }
    .brandTentacles path:nth-child(5){ opacity:.4; stroke-width:8; }
    @media (max-width: 760px){
      .brandTentacles{
        inset:-190px -320px -210px;
        width:calc(100% + 640px);
        height:calc(100% + 400px);
      }
    }
    .brandIntroStage{
      position:relative;
      overflow:visible;
    }
    .brandIntro{
      --brand-intro-tilt-x: 0deg;
      --brand-intro-tilt-y: 0deg;
      --brand-intro-shift-x: 0px;
      --brand-intro-shift-y: 0px;
      --brand-intro-content-shift-x: 0px;
      --brand-intro-content-shift-y: 0px;
      --brand-intro-content-tilt-x: 0deg;
      --brand-intro-content-tilt-y: 0deg;
      --brand-intro-wave-shift-x: 0px;
      --brand-intro-wave-shift-y: 0px;
      --brand-intro-shape-shift-x: 0px;
      --brand-intro-shape-shift-y: 0px;
      --brand-intro-glow-shift-x: 0px;
      --brand-intro-glow-shift-y: 0px;
      --brand-intro-light-x: 50%;
      --brand-intro-light-y: 46%;
      --brand-intro-light-shift-x: 0px;
      --brand-intro-light-shift-y: 0px;
      --brand-intro-glass-opacity: .34;
      --brand-intro-cube-shift-x: 0px;
      --brand-intro-cube-shift-y: 0px;
      --brand-intro-cube-scale: 1;
      --brand-intro-cube-tilt-x: 14deg;
      --brand-intro-cube-tilt-y: -24deg;
      position:relative;
      overflow:hidden;
      border-radius:30px;
      border:1px solid var(--line);
      min-height:clamp(280px, 36vw, 420px);
      padding: clamp(28px, 4vw, 52px) clamp(18px, 5vw, 44px);
      display:grid;
      align-content:center;
      justify-items:center;
      text-align:center;
      background:
        radial-gradient(120% 90% at 50% -8%, rgba(129,216,208,.25), transparent 72%),
        radial-gradient(120% 120% at 50% 110%, rgba(129,216,208,.12), transparent 78%),
        linear-gradient(180deg, rgba(250,250,252,.84), rgba(244,246,251,.9));
      box-shadow:
        0 18px 56px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.42);
      transform: perspective(1300px) rotateX(var(--brand-intro-tilt-x)) rotateY(var(--brand-intro-tilt-y));
      transition: transform .45s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease, border-color .35s ease;
      will-change: auto;
    }
    .brandIntro.is-pointer-active{
      border-color: rgba(129,216,208,.54);
      box-shadow:
        0 24px 66px rgba(17,12,46,.22),
        inset 0 1px 0 rgba(255,255,255,.34);
      will-change: transform;
    }
    html.dark .brandIntro{
      background:
        radial-gradient(120% 90% at 50% -8%, rgba(129,216,208,.24), transparent 72%),
        radial-gradient(120% 120% at 50% 110%, rgba(129,216,208,.10), transparent 78%),
        linear-gradient(180deg, rgba(11,11,16,.86), rgba(9,10,15,.94));
      box-shadow:
        0 18px 56px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
    .brandIntroWaves{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      opacity:0;
      z-index:0;
      transform: translate3d(var(--brand-intro-wave-shift-x), var(--brand-intro-wave-shift-y), 0);
      transition: transform .28s ease;
    }
    html.dark .brandIntroWaves{ opacity:0; }
    .brandIntroWaves path{
      fill:none;
      stroke:url(#brandWaveGradient);
      stroke-width:8;
      stroke-linecap:round;
      filter: blur(.2px);
      transform-box:fill-box;
      transform-origin:center;
      animation: brandWaveDrift 11s ease-in-out infinite;
      animation-play-state: paused;
    }
    .brandIntro.is-waves-active .brandIntroWaves path{
      animation-play-state: running;
    }
    .brandIntroWaves path:nth-child(3){ animation-delay: .8s; opacity:.84; }
    .brandIntroWaves path:nth-child(4){ animation-delay: 1.6s; opacity:.66; }
    @keyframes brandWaveDrift{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-6px,0); }
    }
    .brandIntro::before{
      content:"";
      position:absolute;
      inset:-30% -15%;
      background:
        radial-gradient(420px 180px at 14% 20%, rgba(129,216,208,.25), transparent 72%),
        radial-gradient(460px 200px at 86% 78%, rgba(129,216,208,.16), transparent 72%);
      filter: blur(12px);
      opacity:.78;
      animation: brandIntroFog 16s linear infinite;
      pointer-events:none;
    }
    .brandIntro::after{
      content:"";
      position:absolute;
      inset:-12% -10%;
      background:
        repeating-linear-gradient(120deg, rgba(129,216,208,.12) 0 1px, transparent 1px 48px);
      opacity:0;
      transform: translate3d(0, 0, 0);
      animation: brandIntroLines 18s linear infinite;
      pointer-events:none;
      mix-blend-mode: soft-light;
    }
    .brandIntroGlass{
      position:absolute;
      inset:-20% -12%;
      pointer-events:none;
      z-index:0;
      opacity:0;
      background:
        radial-gradient(360px 220px at var(--brand-intro-light-x) var(--brand-intro-light-y), rgba(255,255,255,.2), rgba(129,216,208,.18) 35%, rgba(129,216,208,0) 72%),
        radial-gradient(520px 280px at calc(var(--brand-intro-light-x) + 8%) calc(var(--brand-intro-light-y) + 10%), rgba(129,216,208,.12), rgba(129,216,208,0) 74%);
      transform: translate3d(var(--brand-intro-light-shift-x), var(--brand-intro-light-shift-y), 0);
      transition: transform .28s ease, opacity .28s ease;
      will-change: transform, opacity;
      mix-blend-mode: screen;
    }
    .brandIntro.is-pointer-active .brandIntroGlass{
      opacity: var(--brand-intro-glass-opacity);
    }
    html.dark .brandIntroGlass{
      background:
        radial-gradient(380px 230px at var(--brand-intro-light-x) var(--brand-intro-light-y), rgba(195,248,241,.18), rgba(129,216,208,.17) 34%, rgba(129,216,208,0) 72%),
        radial-gradient(560px 300px at calc(var(--brand-intro-light-x) + 10%) calc(var(--brand-intro-light-y) + 10%), rgba(129,216,208,.1), rgba(129,216,208,0) 74%);
    }
    .brandIntroShapes{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
      transform: translate3d(var(--brand-intro-shape-shift-x), var(--brand-intro-shape-shift-y), 0);
      transition: transform .34s ease;
    }
    .brandIntroShape{
      position:absolute;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.34);
      background: radial-gradient(120% 100% at 28% 20%, rgba(129,216,208,.2), rgba(129,216,208,.05) 60%, transparent);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      opacity:.55;
      animation: brandOrbFloat 8s ease-in-out infinite;
    }
    .brandIntroShape:nth-child(1){
      width:220px;
      height:220px;
      left:-44px;
      top:14%;
      animation-delay:0s;
    }
    .brandIntroShape:nth-child(2){
      width:160px;
      height:160px;
      right:6%;
      top:-22px;
      animation-delay:1.2s;
    }
    .brandIntroShape:nth-child(3){
      width:280px;
      height:280px;
      right:-70px;
      bottom:-94px;
      animation-delay:2.1s;
    }
    .brandIntroParticle{
      position:absolute;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.58);
      background: rgba(129,216,208,.22);
      box-shadow: 0 0 0 4px rgba(129,216,208,.1), 0 0 26px rgba(129,216,208,.24);
      opacity:.74;
      animation: brandParticleDrift 9.8s ease-in-out infinite;
    }
    .brandIntroParticle:nth-child(4){
      width:10px;
      height:10px;
      left:21%;
      top:18%;
      animation-delay:.35s;
    }
    .brandIntroParticle:nth-child(5){
      width:8px;
      height:8px;
      right:22%;
      top:24%;
      animation-delay:1.1s;
    }
    .brandIntroParticle:nth-child(6){
      width:12px;
      height:12px;
      right:18%;
      bottom:28%;
      animation-delay:1.9s;
    }
    .brandIntroParticle:nth-child(7){
      width:7px;
      height:7px;
      left:30%;
      bottom:24%;
      animation-delay:2.45s;
    }
    .brandIntroGlow{
      position:absolute;
      left:50%;
      top:50%;
      width:min(52vw, 430px);
      aspect-ratio:1/1;
      border-radius:999px;
      pointer-events:none;
      z-index:0;
      opacity:.5;
      filter: blur(16px);
      background: radial-gradient(circle at center, rgba(129,216,208,.32) 0%, rgba(129,216,208,.12) 45%, rgba(129,216,208,0) 74%);
      transform: translate3d(calc(-50% + var(--brand-intro-glow-shift-x)), calc(-50% + var(--brand-intro-glow-shift-y)), 0);
      transition: transform .28s ease, opacity .3s ease;
    }
    .brandIntro.is-pointer-active .brandIntroGlow{
      opacity:.78;
    }
    .brandIntroCubeWrap{
      --brand-cube-depth: clamp(20px, 2.6vw, 36px);
      position:absolute;
      right:clamp(16px, 4vw, 56px);
      top:clamp(16px, 4vw, 52px);
      width:clamp(86px, 10.2vw, 130px);
      height:clamp(86px, 10.2vw, 130px);
      pointer-events:none;
      z-index:1;
      perspective:1200px;
      transform: translate3d(var(--brand-intro-cube-shift-x), var(--brand-intro-cube-shift-y), 0) scale(var(--brand-intro-cube-scale));
      transition: transform .26s ease;
    }
    .brandIntroCubeSpin{
      width:100%;
      height:100%;
      transform-style:preserve-3d;
      animation: brandCubeSpin 13s linear infinite;
    }
    .brandIntroCube{
      width:100%;
      height:100%;
      position:relative;
      transform-style:preserve-3d;
      transform: rotateX(var(--brand-intro-cube-tilt-x)) rotateY(var(--brand-intro-cube-tilt-y));
      transition: transform .26s ease;
    }
    .brandIntroCubeFace{
      position:absolute;
      inset:0;
      border-radius:14px;
      border:1px solid rgba(var(--brand-cube-rgb, 129,216,208), .58);
      background:
        linear-gradient(145deg, rgba(var(--brand-cube-rgb, 129,216,208), .34), rgba(var(--brand-cube-rgb, 129,216,208), .12) 58%, rgba(7,10,18,.02)),
        rgba(255,255,255,.03);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.1),
        0 0 22px rgba(var(--brand-cube-rgb, 129,216,208), .28);
      backdrop-filter: blur(2px);
    }
    html.dark .brandIntroCubeFace{
      background:
        linear-gradient(145deg, rgba(var(--brand-cube-rgb, 129,216,208), .24), rgba(var(--brand-cube-rgb, 129,216,208), .08) 58%, rgba(6,8,14,.22)),
        rgba(8,10,16,.32);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 0 28px rgba(var(--brand-cube-rgb, 129,216,208), .26);
    }
    .brandIntroCubeFace--front{ transform: translateZ(var(--brand-cube-depth)); }
    .brandIntroCubeFace--back{ transform: rotateY(180deg) translateZ(var(--brand-cube-depth)); opacity:.7; }
    .brandIntroCubeFace--left{ transform: rotateY(-90deg) translateZ(var(--brand-cube-depth)); opacity:.68; }
    .brandIntroCubeFace--right{ transform: rotateY(90deg) translateZ(var(--brand-cube-depth)); opacity:.78; }
    .brandIntroCubeFace--top{ transform: rotateX(90deg) translateZ(var(--brand-cube-depth)); opacity:.66; }
    .brandIntroCubeFace--bottom{ transform: rotateX(-90deg) translateZ(var(--brand-cube-depth)); opacity:.6; }
    .brandIntro.is-pointer-active .brandIntroCubeFace{
      border-color: rgba(var(--brand-cube-rgb, 129,216,208), .78);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        0 0 34px rgba(var(--brand-cube-rgb, 129,216,208), .34);
    }
    .brandIntroB2gRail{
      position:absolute;
      left:calc(100% + 20px);
      right:auto;
      top:50%;
      transform: translateY(-50%);
      z-index:4;
      display:grid;
      gap:3px;
      min-width:184px;
      max-width:216px;
      opacity:.72;
      border-radius:16px;
      border:1px solid rgba(129,216,208,.44);
      background:
        linear-gradient(140deg, rgba(8,14,24,.84), rgba(7,12,21,.66)),
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.22), rgba(129,216,208,0) 70%);
      padding:10px 12px 10px 14px;
      box-shadow:
        0 14px 34px rgba(7,10,18,.34),
        0 0 0 1px rgba(129,216,208,.12),
        0 0 34px rgba(129,216,208,.14);
      text-decoration:none;
      transition: transform .26s cubic-bezier(.2,.75,.2,1), border-color .24s ease, box-shadow .24s ease, background .24s ease;
      will-change: transform;
      overflow:hidden;
      animation: brandB2gRailFadeIn .72s cubic-bezier(.18,.82,.22,1) .58s both;
    }
    .brandIntroB2gMobile{
      display:none;
    }
    .brandIntroB2gRail.brandInnerAnim{
      opacity:.72;
      filter:none;
      transform: translateY(-50%);
    }
    .brandIntroB2gRail--left{
      left:auto;
      right:calc(100% + 20px);
      padding-left:30px;
      padding-right:12px;
    }
    .brandIntroB2gRail--left .brandIntroB2gRailArrow{
      left:12px;
      right:auto;
      transform: rotate(-135deg);
    }
    .brandIntroB2gRail::before{
      content:"";
      position:absolute;
      inset:-30% -10%;
      pointer-events:none;
      background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
      transform: translateX(-120%);
      animation: brandB2gRailSweep 3.2s ease-in-out infinite;
    }
    .brandIntroB2gRailText{
      position:relative;
      z-index:1;
      color:rgba(232,246,250,.96);
      font-size:13px;
      line-height:1.16;
      font-weight:900;
      letter-spacing:.03em;
      text-transform:uppercase;
    }
    .brandIntroB2gRailHint{
      position:relative;
      z-index:1;
      color:rgba(188,206,222,.82);
      font-size:11px;
      line-height:1.24;
      font-weight:750;
      letter-spacing:.03em;
    }
    .brandIntroB2gRailArrow{
      position:absolute;
      right:12px;
      top:50%;
      width:10px;
      height:10px;
      margin-top:-6px;
      border-top:2px solid rgba(214,236,244,.94);
      border-right:2px solid rgba(214,236,244,.94);
      transform: rotate(45deg);
      transition: transform .24s ease;
    }
    .brandIntroB2gRail:hover,
    .brandIntroB2gRail:focus-visible{
      opacity:1;
      transform: translateY(-50%) translateX(4px);
      border-color: rgba(129,216,208,.68);
      box-shadow:
        0 16px 36px rgba(7,10,18,.38),
        0 0 0 1px rgba(129,216,208,.22),
        0 0 44px rgba(129,216,208,.2);
    }
    .brandIntroB2gRail:hover .brandIntroB2gRailArrow,
    .brandIntroB2gRail:focus-visible .brandIntroB2gRailArrow{
      transform: translateX(4px) rotate(45deg);
    }
    .brandIntroB2gRail--left:hover .brandIntroB2gRailArrow,
    .brandIntroB2gRail--left:focus-visible .brandIntroB2gRailArrow{
      transform: translateX(-4px) rotate(-135deg);
    }
    .brandIntroB2gRail:active{
      opacity:.92;
      transform: translateY(-50%) translateX(1px) scale(.986);
    }
    html:not(.dark) .brandIntroB2gRail{
      background:
        linear-gradient(140deg, rgba(252,254,255,.92), rgba(244,249,252,.86)),
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.2), rgba(129,216,208,0) 70%);
      border-color: rgba(136,204,195,.56);
      box-shadow:
        0 12px 30px rgba(17,12,46,.14),
        0 0 0 1px rgba(136,204,195,.2),
        0 0 28px rgba(129,216,208,.16);
    }
    html:not(.dark) .brandIntroB2gRailText{
      color:rgba(22,52,68,.92);
    }
    html:not(.dark) .brandIntroB2gRailHint{
      color:rgba(62,88,106,.72);
    }
    html:not(.dark) .brandIntroB2gRailArrow{
      border-top-color: rgba(62,88,106,.9);
      border-right-color: rgba(62,88,106,.9);
    }
    html:not(.dark) .brandIntroB2gRail:hover,
    html:not(.dark) .brandIntroB2gRail:focus-visible{
      opacity:1;
      border-color: rgba(111,193,182,.7);
      box-shadow:
        0 14px 32px rgba(17,12,46,.16),
        0 0 0 1px rgba(111,193,182,.24),
        0 0 38px rgba(129,216,208,.18);
    }
    body.is-b2g-leaving #brand-intro.brandIntro{
      animation: brandIntroB2gExit .28s cubic-bezier(.18,.76,.2,1) forwards;
    }
    body.is-b2g-leaving .brandIntroB2gRail{
      animation: brandB2gRailExit .28s cubic-bezier(.18,.76,.2,1) forwards;
    }
    @keyframes brandB2gRailFadeIn{
      0%{
        opacity:0;
        filter: blur(10px);
      }
      100%{
        opacity:.72;
        filter: blur(0);
      }
    }
    .brandIntroContent{
      position:relative;
      z-index:1;
      max-width:960px;
      transform: translate3d(var(--brand-intro-content-shift-x), var(--brand-intro-content-shift-y), 0) rotateX(var(--brand-intro-content-tilt-x)) rotateY(var(--brand-intro-content-tilt-y));
      transform-style: preserve-3d;
      transition: transform .32s cubic-bezier(.2,.75,.2,1);
      will-change: auto;
    }
    .brandIntro.is-pointer-active .brandIntroContent{ will-change: transform; }
    .brandIntroTitle{
      margin:0;
      font-size:clamp(34px, 5.2vw, 66px);
      line-height:1.04;
      letter-spacing:-.035em;
      font-weight:950;
      color:var(--ink);
      text-wrap:balance;
    }
    .b2gIntro{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(178,190,208,.3);
      background:
        linear-gradient(132deg, rgba(255,255,255,.82), rgba(247,250,253,.92));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 20px 44px rgba(17,12,46,.1);
      padding:clamp(18px, 2.6vw, 30px);
    }
    .b2gIntro::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(520px 180px at -5% -10%, rgba(129,216,208,.2), transparent 70%),
        radial-gradient(440px 190px at 105% 110%, rgba(129,216,208,.14), transparent 74%);
      opacity:.9;
    }
    .b2gIntroGrid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) minmax(200px, .65fr);
      gap:16px;
      align-items:stretch;
    }
    .b2gIntroGrid--single{
      grid-template-columns:1fr;
    }
    .b2gIntroGrid--single .b2gIntroMain{
      justify-items:center;
      text-align:center;
      min-height:auto;
    }
    .b2gIntroGrid--single .b2gIntroTitle{
      max-width:16ch;
      margin-inline:auto;
    }
    .b2gIntroGrid--single .b2gIntroSub{
      margin-inline:auto;
    }
    .b2gIntroGrid--single .b2gIntroActions{
      justify-content:center;
    }
    .b2gIntroMain{
      display:grid;
      align-content:center;
      gap:12px;
      min-height:220px;
    }
    .b2gIntroKicker{
      width:max-content;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.42);
      background: rgba(129,216,208,.1);
      color:rgba(36,64,86,.74);
      padding:6px 12px;
      font-size:11px;
      line-height:1;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .b2gIntroTitle{
      margin:0;
      display:grid;
      gap:4px;
      font-size:clamp(34px, 5.8vw, 70px);
      line-height:.98;
      letter-spacing:-.042em;
      font-weight:950;
      color:var(--ink);
      text-wrap:balance;
    }
    .b2gIntroTitleAccent{
      color:#57b9ae;
      text-shadow: 0 6px 16px rgba(87,185,174,.22);
    }
    .b2gIntroSub{
      margin:0;
      max-width:62ch;
      color:var(--muted);
      font-size:16px;
      line-height:1.58;
      text-wrap:pretty;
    }
    .b2gIntroActions{
      margin-top:2px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .b2gIntroBtn{
      min-height:44px;
      font-size:14px;
      font-weight:900;
    }
    .b2gIntroMeta{
      margin-top:2px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .b2gIntroMetaTag{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      border-radius:999px;
      border:1px solid rgba(174,186,204,.36);
      background: rgba(255,255,255,.62);
      color:rgba(44,59,80,.78);
      padding:0 12px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.01em;
    }
    .b2gIntroPanel{
      border-radius:16px;
      border:1px solid rgba(178,190,208,.34);
      background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(247,250,253,.94));
      display:grid;
      align-content:start;
      gap:10px;
      padding:12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
    }
    .b2gIntroPanelTop{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:22px;
    }
    .b2gIntroDot{
      width:9px;
      height:9px;
      border-radius:999px;
      background:#65d0c3;
      box-shadow: 0 0 0 4px rgba(101,208,195,.16);
    }
    .b2gIntroPanelLabel{
      font-size:10px;
      line-height:1;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(61,75,97,.66);
    }
    .b2gIntroPanelLine{
      height:1px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(129,216,208,.58), rgba(129,216,208,0));
    }
    .b2gIntroPanelRows{
      display:grid;
      gap:8px;
      padding-top:2px;
    }
    .b2gIntroPanelRows span{
      display:block;
      height:8px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(170,182,200,.46), rgba(170,182,200,.2));
    }
    .b2gIntroPanelRows span:nth-child(2){ width:82%; }
    .b2gIntroPanelRows span:nth-child(3){ width:64%; }
    .b2gIntroPanelCopy{
      margin:0;
      font-size:16px;
      line-height:1.4;
      font-weight:900;
      letter-spacing:-.01em;
      color:rgba(35,49,68,.9);
      text-wrap:balance;
    }
    html.dark .b2gIntro{
      border-color: rgba(182,194,214,.24);
      background:
        linear-gradient(136deg, rgba(15,20,31,.92), rgba(10,14,22,.94));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 24px 52px rgba(0,0,0,.34);
    }
    html.dark .b2gIntro::before{
      background:
        radial-gradient(540px 190px at -5% -10%, rgba(129,216,208,.18), transparent 70%),
        radial-gradient(460px 210px at 105% 110%, rgba(129,216,208,.14), transparent 74%);
    }
    html.dark .b2gIntroKicker{
      border-color: rgba(129,216,208,.36);
      background: rgba(129,216,208,.12);
      color:rgba(198,224,220,.9);
    }
    html.dark .b2gIntroTitle{
      color:#eef3fb;
    }
    html.dark .b2gIntroTitleAccent{
      color:#8be1d8;
      text-shadow: 0 8px 18px rgba(139,225,216,.16);
    }
    html.dark .b2gIntroSub{
      color:rgba(198,208,223,.86);
    }
    html.dark .b2gIntroBtn{
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }
    html.dark .b2gIntroMetaTag{
      border-color: rgba(162,177,199,.26);
      background: rgba(255,255,255,.04);
      color:rgba(198,208,223,.86);
    }
    html.dark .b2gIntroPanel{
      border-color: rgba(162,177,199,.2);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    html.dark .b2gIntroPanelLabel{
      color:rgba(198,208,223,.64);
    }
    html.dark .b2gIntroPanelCopy{
      color:rgba(230,240,250,.92);
      text-shadow: 0 1px 0 rgba(0,0,0,.24);
    }
    html.dark .b2gIntroPanelRows span{
      background: linear-gradient(90deg, rgba(176,188,206,.36), rgba(176,188,206,.14));
    }
    .brandIntroTitle .brandIntroWord{
      --intro-word-shift-x: 0px;
      --intro-word-shift-y: 18px;
      display:inline-block;
      opacity:0;
      filter: blur(14px);
      transform: translate3d(var(--intro-word-shift-x), var(--intro-word-shift-y), 0) scale(.97);
      will-change: transform, filter, opacity;
    }
    .brandIntroTitle .brandIntroWord:nth-child(1){
      --intro-word-shift-x: -26px;
      --intro-word-shift-y: 24px;
    }
    .brandIntroTitle .brandIntroWord:nth-child(2){
      --intro-word-shift-x: 14px;
      --intro-word-shift-y: 20px;
    }
    .brandIntroTitle .brandIntroWord:nth-child(3){
      --intro-word-shift-x: 30px;
      --intro-word-shift-y: 24px;
    }
    #brand-intro.in .brandIntroTitle .brandIntroWord:nth-child(1){
      animation: brandIntroWordIn .66s cubic-bezier(.14,.86,.18,1) .04s forwards;
    }
    #brand-intro.in .brandIntroTitle .brandIntroWord:nth-child(2){
      animation: brandIntroWordIn .66s cubic-bezier(.14,.86,.18,1) .14s forwards;
    }
    #brand-intro.in .brandIntroTitle .brandIntroWord:nth-child(3){
      animation: brandIntroWordIn .66s cubic-bezier(.14,.86,.18,1) .24s forwards;
    }
    .brandIntroTitleAccent{
      color:var(--accent);
      text-shadow: 0 0 20px rgba(129,216,208,.18);
    }
    .brandIntroSub{
      margin:16px auto 0;
      max-width:56ch;
      font-size:clamp(14px, 1.7vw, 18px);
      line-height:1.58;
      color:rgba(34,42,55,.9);
      font-weight:600;
      text-wrap:balance;
    }
    html.dark .brandIntroSub{ color:rgba(233,240,248,.92); }
    .brandIntroLead{
      margin:12px auto 0;
      max-width:68ch;
      font-size:15px;
      line-height:1.66;
      color:rgba(47,56,71,.88);
      font-weight:560;
      text-wrap:pretty;
    }
    html.dark .brandIntroLead{ color:rgba(206,217,229,.9); }
    .brandIntroQuote{
      margin:14px auto 0;
      max-width:62ch;
      border-radius:14px;
      border:1px solid rgba(166,173,186,.34);
      background: rgba(8,10,16,.28);
      padding:10px 14px;
      font-size:14px;
      line-height:1.56;
      color:var(--ink);
      font-weight:650;
      text-wrap:balance;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }
    html:not(.dark) .brandIntroQuote{
      background: rgba(255,255,255,.6);
      color:rgba(26,36,52,.92);
    }
    .brandIntroQuote strong{
      color:var(--accent);
      font-weight:900;
    }
    .brandBusiness{
      position:relative;
      overflow:hidden;
      border-radius:26px;
      border:1px solid var(--line);
      background:
        radial-gradient(880px 360px at 100% 0%, rgba(129,216,208,.12), transparent 72%),
        var(--paperGlass);
      box-shadow:
        0 18px 56px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.2);
      padding:clamp(16px, 2.8vw, 30px);
    }
    html.dark .brandBusiness{
      background:
        radial-gradient(880px 360px at 100% 0%, rgba(129,216,208,.16), transparent 72%),
        var(--paperGlass);
      box-shadow:
        0 20px 60px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.05);
    }
    .brandBusinessTitle{
      margin:0;
      font-size:clamp(28px, 3.3vw, 46px);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:950;
      text-wrap:balance;
    }
    .brandBusinessSub{
      margin:12px 0 0;
      max-width:74ch;
      color:var(--muted);
      font-size:16px;
      line-height:1.62;
    }
    .brandCapabilities{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .brandCapability{
      border-radius:18px;
      border:1px solid rgba(166,173,186,.28);
      background: var(--paperGlass2);
      padding:14px;
      transition: transform .24s cubic-bezier(.22,.72,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .brandCapability:hover,
    .brandCapability:focus-within{
      transform: translateY(-3px);
      border-color: rgba(129,216,208,.52);
      box-shadow: 0 14px 28px rgba(17,12,46,.14), inset 0 1px 0 rgba(255,255,255,.12);
      background:
        radial-gradient(140% 100% at 50% -18%, rgba(129,216,208,.1), transparent 68%),
        var(--paperGlass2);
    }
    .brandCapabilityHead{
      display:flex;
      align-items:flex-start;
      gap:10px;
    }
    .brandCapabilityIcon{
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid rgba(129,216,208,.52);
      background:
        radial-gradient(120% 120% at 24% 20%, rgba(129,216,208,.22), rgba(129,216,208,.03) 62%, transparent),
        rgba(255,255,255,.02);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      color:var(--accent);
      position:relative;
      overflow:hidden;
    }
    .brandCapabilityIcon::after{
      content:"";
      position:absolute;
      width:7px;
      height:7px;
      border-radius:999px;
      background: rgba(129,216,208,.9);
      box-shadow: 0 0 0 0 rgba(129,216,208,.4);
      animation: brandIconPulse 2.7s ease-out infinite;
    }
    .brandCapabilityTitle{
      margin:0;
      font-size:21px;
      line-height:1.1;
      letter-spacing:-.02em;
      font-weight:900;
      text-wrap:balance;
    }
    .brandCapabilityText{
      margin:10px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.58;
      text-wrap:pretty;
    }
    .brandDetailColumns{
      margin-top:8px;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
    }
    .b2gDetailColumnsSingle{
      grid-template-columns:1fr;
    }
    .b2gLegalColumns{
      margin-top:18px;
    }
    .b2gArticle{
      margin-top:14px;
      display:grid;
      gap:12px;
    }
    .b2gArticleNav{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
      gap:8px;
    }
    .b2gArticleTab{
      min-height:44px;
      border-radius:12px;
      border:1px solid rgba(166,173,186,.28);
      background: rgba(255,255,255,.46);
      color:rgba(56,67,84,.88);
      font:inherit;
      font-size:13px;
      line-height:1.3;
      font-weight:800;
      text-align:left;
      padding:10px 12px;
      cursor:pointer;
      transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .b2gArticleTab:hover,
    .b2gArticleTab:focus-visible{
      border-color: rgba(129,216,208,.54);
      color:rgba(34,50,71,.96);
      background: rgba(255,255,255,.62);
      box-shadow: 0 8px 18px rgba(17,12,46,.08);
      outline:none;
    }
    .b2gArticleTab.is-active{
      border-color: rgba(129,216,208,.66);
      background:
        radial-gradient(120% 90% at 0% 0%, rgba(129,216,208,.16), transparent 72%),
        rgba(255,255,255,.72);
      color:rgba(28,45,68,.98);
      box-shadow: 0 10px 22px rgba(17,12,46,.1);
    }
    .b2gArticlePanel{
      border-radius:16px;
      border:1px solid rgba(166,173,186,.26);
      background: rgba(255,255,255,.35);
      padding:14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    }
    .b2gArticlePanel.is-revealing{
      animation: b2gPanelReveal .32s cubic-bezier(.2,.8,.2,1);
    }
    .b2gArticlePanel[hidden]{
      display:none !important;
    }
    @keyframes b2gPanelReveal{
      0%{
        opacity:0;
        transform: translate3d(0, 8px, 0);
        filter: blur(2px);
      }
      100%{
        opacity:1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }
    .b2gArticleLead,
    .b2gArticleText{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.72;
      text-wrap:pretty;
    }
    .b2gArticleText + .b2gArticleText{
      margin-top:12px;
    }
    .b2gArticleText strong{
      color:var(--ink);
      font-weight:800;
    }
    html.dark .b2gArticleTab{
      border-color: rgba(162,177,199,.24);
      background: rgba(255,255,255,.04);
      color:rgba(198,208,223,.88);
    }
    html.dark .b2gArticleTab:hover,
    html.dark .b2gArticleTab:focus-visible{
      border-color: rgba(129,216,208,.54);
      background: rgba(255,255,255,.08);
      color:#e8f5ff;
      box-shadow: 0 10px 22px rgba(0,0,0,.32);
    }
    html.dark .b2gArticleTab.is-active{
      border-color: rgba(129,216,208,.62);
      background:
        radial-gradient(120% 90% at 0% 0%, rgba(129,216,208,.16), transparent 72%),
        rgba(255,255,255,.1);
      color:#ecf8ff;
    }
    html.dark .b2gArticlePanel{
      border-color: rgba(162,177,199,.22);
      background: rgba(255,255,255,.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .brandDetailCard{
      border-radius:16px;
      border:1px solid rgba(166,173,186,.28);
      background: var(--paperGlass2);
      padding:14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
      transition: transform .24s cubic-bezier(.22,.72,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .brandDetailCard:hover,
    .brandDetailCard:focus-within{
      transform: translateY(-3px);
      border-color: rgba(129,216,208,.52);
      box-shadow: 0 16px 30px rgba(17,12,46,.15), inset 0 1px 0 rgba(255,255,255,.14);
      background:
        radial-gradient(140% 100% at 50% -18%, rgba(129,216,208,.1), transparent 68%),
        var(--paperGlass2);
    }
    .brandDetailTitle{
      margin:0;
      font-size:19px;
      line-height:1.12;
      letter-spacing:-.018em;
      font-weight:900;
      text-wrap:balance;
    }
    .brandDetailList{
      margin:10px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:7px;
    }
    .brandDetailList li{
      position:relative;
      padding-left:14px;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .brandDetailList li::before{
      content:"";
      position:absolute;
      left:0;
      top:.57em;
      width:7px;
      height:7px;
      border-radius:999px;
      background: rgba(129,216,208,.78);
      box-shadow: 0 0 0 3px rgba(129,216,208,.14);
    }
    .b2gDenseList{
      margin-top:8px;
    }
    .b2gLegalGrid{
      margin:0;
      display:grid;
      gap:10px;
    }
    .b2gLegalCard:hover,
    .b2gLegalCard:focus-within{
      transform:none;
    }
    .b2gLegalItem{
      display:grid;
      gap:4px;
      padding-bottom:8px;
      border-bottom:1px solid rgba(166,173,186,.24);
    }
    .b2gLegalItem:last-child{
      padding-bottom:0;
      border-bottom:none;
    }
    .b2gLegalLabel{
      margin:0;
      font-size:11px;
      line-height:1.2;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted2);
    }
    .b2gLegalValue{
      margin:0;
      font-size:14px;
      line-height:1.45;
      color:var(--ink);
      font-weight:700;
      text-wrap:pretty;
    }
    .b2gPdfCta{
      justify-content:flex-start;
      margin-top:12px;
    }
    #b2g-pdf .brandHowHead{
      text-align:center;
    }
    #b2g-pdf .brandHowTitle.underline::after{
      display:none;
    }
    #b2g-pdf .brandHowSub{
      margin-inline:auto;
      max-width:72ch;
    }
    #b2g-pdf .brandHowGrid{
      max-width:900px;
      margin:14px auto 0;
    }
    #b2g-pdf .b2gPdfCta{
      justify-content:center;
    }
    .brandQuote{
      margin:20px auto 0;
      max-width:980px;
      border-radius:20px;
      border:1px solid rgba(166,173,186,.3);
      background: var(--paperGlass2);
      padding:24px 20px 18px;
      text-align:center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
      position:relative;
      overflow:hidden;
    }
    .brandQuote::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(360px 110px at 50% -8%, rgba(129,216,208,.16), transparent 72%);
      pointer-events:none;
    }
    .brandQuoteMark{
      display:block;
      line-height:1;
      font-size:40px;
      font-weight:900;
      color:rgba(129,216,208,.72);
      margin-bottom:4px;
      text-shadow: 0 0 14px rgba(129,216,208,.22);
      position:relative;
      z-index:1;
    }
    .brandQuoteText{
      margin:0;
      font-size:clamp(19px, 2.3vw, 32px);
      line-height:1.42;
      letter-spacing:-.008em;
      font-style:italic;
      color:var(--ink);
      font-weight:300;
      text-shadow: 0 1px 0 rgba(0,0,0,.24);
      text-wrap:balance;
      position:relative;
      z-index:1;
    }
    .brandQuoteText strong{
      color:var(--accent);
      font-weight:700;
    }
    .brandQuoteAuthor{
      display:block;
      margin-top:12px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted2);
      position:relative;
      z-index:1;
    }
    .brandCtaRow{
      margin-top:18px;
      display:flex;
      justify-content:center;
    }
    .brandCtaBtn{
      border-radius:999px;
      padding:13px 30px;
      font-size:16px;
      font-weight:900;
      box-shadow: 0 16px 32px rgba(17,12,46,.18);
    }
    .brandCtaBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 20px 38px rgba(17,12,46,.24);
    }
    .brandHow{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid var(--line);
      background:
        radial-gradient(760px 320px at 12% 0%, rgba(129,216,208,.1), transparent 72%),
        radial-gradient(760px 320px at 100% 100%, rgba(129,216,208,.07), transparent 76%),
        var(--paperGlass);
      box-shadow:
        0 0 0 1px rgba(129,216,208,0),
        0 0 96px 16px rgba(129,216,208,0),
        0 0 210px 42px rgba(129,216,208,0),
        0 0 400px 92px rgba(129,216,208,0),
        0 18px 52px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
      padding:clamp(16px, 2.5vw, 26px);
    }
    html.dark .brandHow{
      background:
        radial-gradient(760px 320px at 12% 0%, rgba(129,216,208,.14), transparent 72%),
        radial-gradient(760px 320px at 100% 100%, rgba(129,216,208,.09), transparent 76%),
        var(--paperGlass);
      box-shadow:
        0 0 0 1px rgba(129,216,208,0),
        0 0 96px 16px rgba(129,216,208,0),
        0 0 210px 42px rgba(129,216,208,0),
        0 0 400px 92px rgba(129,216,208,0),
        0 22px 60px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
    .brandHow.brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(129,216,208,.11),
        0 0 84px 14px rgba(129,216,208,.16),
        0 0 186px 38px rgba(129,216,208,.12),
        0 0 360px 84px rgba(129,216,208,.08),
        0 18px 52px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
    }
    html.dark .brandHow.brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(129,216,208,.13),
        0 0 100px 20px rgba(129,216,208,.24),
        0 0 220px 48px rgba(129,216,208,.17),
        0 0 440px 106px rgba(129,216,208,.12),
        0 22px 60px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
    .brandHowHead{
      display:grid;
      gap:8px;
      position:relative;
      z-index:1;
    }
    .brandHowTitle{
      margin:0;
      font-size:clamp(24px, 3vw, 38px);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:950;
      text-wrap:balance;
    }
    .brandHowSub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:15px;
      line-height:1.56;
      max-width:72ch;
      text-wrap:pretty;
    }
    .brandHowGrid{
      margin-top:16px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      align-items:stretch;
    }
    .brandHowCard{
      position:relative;
      border-radius:16px;
      border:1px solid rgba(166,173,186,.28);
      background: var(--paperGlass2);
      padding:14px;
      display:grid;
      align-content:start;
      gap:9px;
      transition: transform .24s cubic-bezier(.22,.72,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .brandHowCard::before{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      top:0;
      height:1px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(129,216,208,.42), rgba(129,216,208,.1));
      opacity:.65;
      pointer-events:none;
    }
    .brandHowCard:hover,
    .brandHowCard:focus-within{
      transform: translateY(-3px);
      border-color: rgba(129,216,208,.5);
      box-shadow: 0 14px 26px rgba(17,12,46,.14), inset 0 1px 0 rgba(255,255,255,.1);
      background:
        radial-gradient(140% 100% at 50% -18%, rgba(129,216,208,.08), transparent 68%),
        var(--paperGlass2);
    }
    .brandHowCardWide{
      grid-column:1 / -1;
      padding:15px 16px;
      gap:8px;
    }
    .brandHowCardWide .brandHowCardTitle{
      font-size:clamp(17px, 1.55vw, 21px);
      max-width:34ch;
    }
    .brandHowCardWide .brandHowCardText{
      max-width:92ch;
      font-size:13.5px;
      line-height:1.56;
    }
    .brandHowCardHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .brandHowNo{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:34px;
      height:24px;
      padding:0 8px;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.5);
      background: rgba(129,216,208,.1);
      color:var(--accent);
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
    }
    .brandHowTag{
      color:var(--muted2);
      font-size:11px;
      line-height:1.35;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:800;
      text-align:right;
    }
    .brandHowCardTitle{
      margin:0;
      font-size:18px;
      line-height:1.14;
      letter-spacing:-.018em;
      font-weight:900;
      text-wrap:balance;
    }
    .brandHowCardText{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.52;
      text-wrap:pretty;
    }
    .brandHowNote{
      margin:12px 0 0;
      border-radius:14px;
      border:1px solid rgba(166,173,186,.24);
      background:
        radial-gradient(120% 100% at 50% -18%, rgba(129,216,208,.07), transparent 72%),
        rgba(255,255,255,.02);
      padding:10px 12px;
      color:var(--muted);
      font-size:13px;
      line-height:1.52;
      text-wrap:pretty;
    }
    .brandHowNote strong{
      color:var(--ink);
      font-weight:850;
    }
    .brandHowB2g{
      margin-top:14px;
      border-radius:16px;
      border:1px solid rgba(129,216,208,.44);
      background:
        linear-gradient(135deg, rgba(129,216,208,.17), rgba(129,216,208,.04) 46%, rgba(10,14,24,.06)),
        rgba(255,255,255,.02);
      box-shadow:
        0 0 0 1px rgba(129,216,208,.12),
        0 14px 32px rgba(17,12,46,.14);
      overflow:hidden;
      position:relative;
      scroll-margin-top:120px;
    }
    .brandHowB2g:target{
      border-color: rgba(129,216,208,.72);
      box-shadow:
        0 0 0 1px rgba(129,216,208,.24),
        0 18px 42px rgba(17,12,46,.18),
        0 0 62px rgba(129,216,208,.26);
    }
    .brandHowB2g::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(76% 62% at 10% -12%, rgba(129,216,208,.26), transparent 68%),
        radial-gradient(84% 72% at 90% 112%, rgba(129,216,208,.16), transparent 72%);
      opacity:.9;
    }
    .brandHowB2g[open]{
      border-color: rgba(129,216,208,.62);
      box-shadow:
        0 0 0 1px rgba(129,216,208,.2),
        0 18px 42px rgba(17,12,46,.18),
        0 0 52px rgba(129,216,208,.18);
    }
    .brandHowB2gSummary{
      list-style:none;
      cursor:pointer;
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:auto 1fr auto auto;
      gap:10px 12px;
      align-items:center;
      padding:12px 14px;
    }
    .brandHowB2gSummary::-webkit-details-marker{ display:none; }
    .brandHowB2gSummary::marker{ content:""; }
    .brandHowB2gBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:46px;
      height:24px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.64);
      background: rgba(129,216,208,.2);
      color:#eafffc;
      font-size:11px;
      line-height:1;
      font-weight:900;
      letter-spacing:.11em;
      text-transform:uppercase;
      box-shadow: 0 0 0 0 rgba(129,216,208,.36);
      animation: brandIconPulse 2.4s ease-out infinite;
    }
    .brandHowB2gTitle{
      font-size:clamp(15px, 1.45vw, 19px);
      line-height:1.12;
      letter-spacing:.035em;
      text-transform:uppercase;
      font-weight:950;
      color:#e9fffc;
      text-wrap:balance;
    }
    .brandHowB2gHint{
      font-size:11px;
      line-height:1.25;
      font-weight:850;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:rgba(220,246,241,.88);
      white-space:nowrap;
    }
    .brandHowB2gIcon{
      width:10px;
      height:10px;
      border-right:2px solid rgba(224,248,244,.92);
      border-bottom:2px solid rgba(224,248,244,.92);
      transform: rotate(45deg) translateY(-1px);
      transition: transform .22s ease;
      margin-right:2px;
    }
    .brandHowB2g[open] .brandHowB2gIcon{
      transform: rotate(225deg) translateY(-1px);
    }
    .brandHowB2gBody{
      position:relative;
      z-index:1;
      padding:0 14px 13px;
      border-top:1px solid rgba(129,216,208,.24);
      display:grid;
      gap:10px;
      color:rgba(220,232,247,.9);
    }
    .brandHowB2gIntro{
      margin:11px 0 0;
      font-size:13.5px;
      line-height:1.54;
      color:rgba(220,232,247,.92);
      text-wrap:pretty;
    }
    .brandHowB2gList{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:6px;
    }
    .brandHowB2gList li{
      font-size:13px;
      line-height:1.52;
      color:rgba(220,232,247,.9);
      text-wrap:pretty;
    }
    .brandHowB2gNote{
      margin:0;
      padding:10px 11px;
      border-radius:11px;
      border:1px solid rgba(129,216,208,.2);
      background: rgba(129,216,208,.09);
      color:#d7f6f0;
      font-size:12.5px;
      line-height:1.48;
      text-wrap:pretty;
    }
    .brandHowB2gPageBtn{
      margin-top:2px;
      width:max-content;
      min-height:40px;
      padding-inline:16px;
      font-size:13px;
      font-weight:850;
      border-radius:12px;
      border-color: rgba(129,216,208,.42);
      background: rgba(129,216,208,.16);
    }
    .brandHowB2gPageBtn:hover{
      border-color: rgba(129,216,208,.62);
      background: rgba(129,216,208,.24);
      box-shadow: 0 10px 24px rgba(17,12,46,.16);
    }
    html:not(.dark) .brandHowB2g{
      border-color: rgba(176,188,205,.34);
      background:
        radial-gradient(120% 84% at 50% -20%, rgba(129,216,208,.1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,251,253,.9));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 10px 22px rgba(17,12,46,.08);
    }
    html:not(.dark) .brandHowB2g::before{
      background:
        radial-gradient(76% 62% at 10% -12%, rgba(112,224,210,.16), transparent 68%),
        radial-gradient(84% 72% at 90% 112%, rgba(112,224,210,.1), transparent 72%);
    }
    html:not(.dark) .brandHowB2g:target,
    html:not(.dark) .brandHowB2g[open]{
      border-color: rgba(129,216,208,.46);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 14px 28px rgba(17,12,46,.1),
        0 0 28px rgba(129,216,208,.12);
    }
    html:not(.dark) .brandHowB2gBadge{
      border-color: rgba(118,198,188,.5);
      background: rgba(129,216,208,.18);
      color:rgba(22,56,52,.84);
      animation: none;
      box-shadow:none;
    }
    html:not(.dark) .brandHowB2gTitle{
      color:var(--ink);
    }
    html:not(.dark) .brandHowB2gHint{
      color:var(--muted2);
    }
    html:not(.dark) .brandHowB2gIcon{
      border-right-color: var(--muted2);
      border-bottom-color: var(--muted2);
    }
    html:not(.dark) .brandHowB2gBody{
      border-top-color: rgba(176,188,205,.24);
      color:var(--muted);
    }
    html:not(.dark) .brandHowB2gIntro,
    html:not(.dark) .brandHowB2gList li{
      color:var(--muted);
    }
    html:not(.dark) .brandHowB2gNote{
      border-color: rgba(176,188,205,.22);
      background: rgba(129,216,208,.08);
      color:rgba(40,56,75,.84);
    }
    html:not(.dark) .brandHowB2gPageBtn{
      border-color: rgba(176,188,205,.34);
      background: rgba(255,255,255,.66);
      color:var(--ink);
    }
    html:not(.dark) .brandHowB2gPageBtn:hover{
      border-color: rgba(129,216,208,.44);
      background: rgba(255,255,255,.82);
      box-shadow: 0 8px 18px rgba(17,12,46,.1);
    }
    .brandPortfolio{
      border-radius:24px;
      border:1px solid var(--line);
      background:
        radial-gradient(720px 300px at 100% 0%, rgba(129,216,208,.1), transparent 72%),
        var(--paperGlass);
      box-shadow: 0 18px 52px rgba(17,12,46,.12);
      padding:clamp(16px, 2.5vw, 26px);
    }
    .brandPortfolioHead{
      display:grid;
      gap:8px;
    }
    .brandPortfolioTitle{
      margin:0;
      font-size:clamp(26px, 3.2vw, 40px);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:950;
    }
    .brandPortfolioSub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:15px;
      line-height:1.55;
      max-width:78ch;
    }
    .brandCaseGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .brandRepGrid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .brandCaseCard{
      border-radius:16px;
      border:1px solid rgba(166,173,186,.28);
      background: var(--paperGlass2);
      padding:12px;
      transition: transform .24s cubic-bezier(.22,.72,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .brandCaseCard:hover,
    .brandCaseCard:focus-within{
      transform: translateY(-3px);
      border-color: rgba(129,216,208,.5);
      box-shadow: 0 14px 26px rgba(17,12,46,.14), inset 0 1px 0 rgba(255,255,255,.1);
      background:
        radial-gradient(140% 100% at 50% -18%, rgba(129,216,208,.08), transparent 68%),
        var(--paperGlass2);
    }
    .brandCaseMedia{
      height:120px;
      border-radius:12px;
      border:1px dashed rgba(166,173,186,.44);
      background:
        linear-gradient(145deg, rgba(129,216,208,.08), rgba(129,216,208,.02)),
        rgba(193,199,210,.05);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted2);
      font-size:12px;
      font-weight:850;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .brandCaseTitle{
      margin-top:10px;
      font-size:17px;
      line-height:1.24;
      font-weight:900;
      letter-spacing:-.015em;
      text-wrap:balance;
    }
    .brandCaseList{
      margin:10px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:6px;
    }
    .brandCaseList li{
      position:relative;
      padding-left:13px;
      color:var(--muted);
      font-size:13px;
      line-height:1.46;
    }
    .brandCaseList li::before{
      content:"";
      position:absolute;
      left:0;
      top:.58em;
      width:6px;
      height:6px;
      border-radius:999px;
      background: rgba(129,216,208,.85);
    }
    .brandCaseMeta{
      margin-top:10px;
      font-size:11px;
      color:var(--muted2);
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight:800;
    }
    .brandRepCard{
      display:grid;
      gap:10px;
    }
    .brandRepCard--dima,
    .brandRepCard--portrait{
      grid-template-columns:minmax(148px, 178px) minmax(0, 1fr);
      grid-template-areas:"photo body";
      column-gap:14px;
      row-gap:0;
      align-items:center;
    }
    .brandRepCard--dima .brandRepPhoto--real,
    .brandRepCard--portrait .brandRepPhoto--real{
      grid-area:photo;
      width:100%;
      max-width:178px;
      margin:0;
      border:none;
      box-shadow:none;
      background:transparent;
    }
    .brandRepCard--dima .brandRepPhoto--real::after,
    .brandRepCard--portrait .brandRepPhoto--real::after{
      display:none;
    }
    .brandRepCard--dima .brandRepPhoto--real .brandRepPhotoImg,
    .brandRepCard--portrait .brandRepPhoto--real .brandRepPhotoImg{
      border-radius:inherit;
      box-shadow:none;
    }
    .brandRepCard--dima .brandRepBody,
    .brandRepCard--portrait .brandRepBody{
      grid-area:body;
      display:grid;
      align-content:center;
      gap:10px;
      min-height:100%;
      max-width:40ch;
    }
    .brandRepCard--dima .brandRepRole,
    .brandRepCard--portrait .brandRepRole{
      margin:0;
      padding-bottom:2px;
      position:relative;
    }
    .brandRepCard--dima .brandRepRole::after,
    .brandRepCard--portrait .brandRepRole::after{
      content:"";
      display:block;
      width:min(100%, 280px);
      height:1px;
      margin-top:8px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(166,173,186,.34), rgba(129,216,208,.42), rgba(166,173,186,.18));
      opacity:.92;
    }
    .brandRepCard--dima .brandRepDesc,
    .brandRepCard--portrait .brandRepDesc{
      margin:0;
      font-size:14px;
      line-height:1.58;
    }
    .brandRepPhoto{
      position:relative;
      height:170px;
      border-radius:14px;
      border:1px solid rgba(129,216,208,.26);
      overflow:hidden;
      background:
        radial-gradient(120% 100% at 18% 14%, rgba(129,216,208,.18), transparent 56%),
        radial-gradient(90% 90% at 88% 86%, rgba(129,216,208,.1), transparent 68%),
        linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .brandRepPhoto::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(80% 70% at 50% 40%, rgba(129,216,208,.08), transparent 72%);
      pointer-events:none;
    }
    .brandRepPhotoImg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 50%;
      display:block;
      z-index:0;
      transform:translateZ(0);
    }
    .brandRepPhoto--real{
      display:grid;
      place-items:center;
      width:min(100%, 178px);
      height:auto;
      aspect-ratio:3 / 4;
      margin-inline:auto;
      border:none;
      box-shadow:none;
      background:transparent;
      overflow:hidden;
      isolation:isolate;
      border-radius:12px;
    }
    .brandRepPhoto--real::before{
      content:none;
      display:none;
    }
    .brandRepPhoto--real::after{
      content:none;
      display:none;
    }
    .brandRepPhoto--real .brandRepAvatar{
      display:none;
    }
    .brandRepPhoto--real .brandRepPhotoImg{
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      transform:none;
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
    }
    .brandRepPhoto--real .brandRepPhotoName{
      display:none;
    }
    .brandRepAvatar{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      z-index:1;
      color: rgba(228,255,251,.98);
      font-size:34px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      text-shadow: 0 8px 22px rgba(129,216,208,.18);
    }
    .brandRepAvatar::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:96px;
      height:96px;
      transform:translate(-50%, -50%);
      border-radius:26px;
      border:1px solid rgba(129,216,208,.38);
      background:
        radial-gradient(120% 120% at 22% 18%, rgba(129,216,208,.26), transparent 62%),
        linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(17,12,46,.16);
      z-index:-1;
    }
    .brandRepPhotoName{
      position:absolute;
      left:12px;
      right:12px;
      bottom:10px;
      margin:0;
      font-size:18px;
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--ink);
      text-wrap:balance;
      text-shadow: 0 1px 0 rgba(0,0,0,.28);
    }
    .brandRepRole{
      margin:0;
      color:var(--muted2);
      font-size:11px;
      line-height:1.35;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:800;
    }
    .brandRepName{
      display:block;
      margin:0;
      color:var(--ink);
      font-size:clamp(20px, 2vw, 28px);
      line-height:1.06;
      font-weight:950;
      letter-spacing:-.03em;
      text-wrap:balance;
    }
    .brandRepDesc{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.52;
      text-wrap:pretty;
    }
    .brandFunnel{
      border-radius:24px;
      border:1px solid var(--line);
      background:
        radial-gradient(760px 320px at 12% 0%, rgba(129,216,208,.11), transparent 72%),
        var(--paperGlass);
      box-shadow: 0 18px 52px rgba(17,12,46,.12);
      padding:clamp(16px, 2.6vw, 26px);
    }
    .brandFunnelGrid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:16px;
      align-items:start;
    }
    .brandFunnelInfo{
      display:grid;
      grid-template-rows:auto auto auto auto;
      align-self:center;
      align-content:start;
      gap:0;
      min-height:0;
      padding-block:0;
    }
    .b2gFormInfo{
      align-self:stretch;
      grid-template-rows:auto auto auto auto;
      gap:10px;
      justify-content:start;
      padding-top:2px;
    }
    .b2gFormAside{
      border-radius:14px;
      border:1px solid rgba(166,173,186,.24);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
    }
    .b2gFormAsideTitle{
      margin:0;
      font-size:14px;
      line-height:1.3;
      font-weight:900;
      letter-spacing:.01em;
      color:var(--ink);
    }
    .b2gFormAsideText{
      margin:6px 0 0;
      font-size:13px;
      line-height:1.58;
      color:var(--muted);
      text-wrap:pretty;
    }
    .brandFunnelTitle{
      margin:0;
      font-size:clamp(24px, 3vw, 38px);
      line-height:1.08;
      letter-spacing:-.028em;
      font-weight:950;
      text-wrap:balance;
    }
    .brandFunnelSub{
      margin:10px 0 0;
      color:var(--muted);
      font-size:16px;
      line-height:1.6;
      max-width:64ch;
    }
    .brandFunnelList{
      margin:12px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .brandFunnelList li{
      position:relative;
      padding-left:14px;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .brandFunnelList li::before{
      content:"";
      position:absolute;
      left:0;
      top:.57em;
      width:7px;
      height:7px;
      border-radius:999px;
      background: rgba(129,216,208,.84);
      box-shadow: 0 0 0 3px rgba(129,216,208,.14);
    }
    .brandLeadForm{
      border-radius:18px;
      border:1px solid rgba(166,173,186,.28);
      background: var(--paperGlass2);
      padding:14px;
      display:grid;
      gap:8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }
    .brandSteps{
      margin-top:14px;
      position:relative;
      padding-top:14px;
      --brand-steps-glow-x: 50%;
      --brand-steps-glow-w: clamp(120px, 24%, 240px);
    }
    .brandStepsLine{
      position:absolute;
      left:4%;
      right:4%;
      top:0;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(102,225,255,.10) 0%, rgba(102,225,255,.68) 18%, rgba(102,225,255,.96) 50%, rgba(102,225,255,.68) 82%, rgba(102,225,255,.10) 100%);
      box-shadow: 0 0 0 1px rgba(102,225,255,.08);
      overflow:hidden;
    }
    .brandStepsLine::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:var(--brand-steps-glow-x);
      width:var(--brand-steps-glow-w);
      border-radius:inherit;
      background: linear-gradient(90deg, rgba(129,216,208,0) 0%, rgba(189,247,240,.78) 18%, rgba(204,252,246,.98) 50%, rgba(189,247,240,.78) 82%, rgba(129,216,208,0) 100%);
      transform: translateX(-50%);
      opacity:0;
      transition: opacity .24s ease;
    }
    .brandSteps.is-active .brandStepsLine::after{
      opacity:.92;
    }
    .brandStepsGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .brandStepCard{
      border-radius:16px;
      border:1px solid rgba(166,173,186,.3);
      background: var(--paperGlass2);
      padding:12px;
      box-shadow: 0 10px 22px rgba(17,12,46,.09);
      transition: transform .24s cubic-bezier(.22,.72,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .brandStepCard:hover,
    .brandStepCard:focus-within{
      transform: translateY(-3px);
      border-color: rgba(129,216,208,.52);
      box-shadow: 0 15px 28px rgba(17,12,46,.14), inset 0 1px 0 rgba(255,255,255,.1);
      background:
        radial-gradient(140% 100% at 50% -18%, rgba(129,216,208,.09), transparent 68%),
        var(--paperGlass2);
    }
    .brandStepNo{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      border-radius:999px;
      background: rgba(129,216,208,.16);
      border:1px solid rgba(129,216,208,.58);
      color:var(--accent);
      font-size:11px;
      font-weight:900;
    }
    .brandStepTitle{
      margin:8px 0 0;
      font-size:18px;
      line-height:1.12;
      font-weight:900;
      letter-spacing:-.018em;
    }
    .brandStepText{
      margin:6px 0 0;
      font-size:13px;
      line-height:1.48;
      color:var(--muted);
    }
    .brandStepsPrompt{
      min-height:116px;
      padding:16px 10px 2px;
      display:grid;
      grid-template-columns: clamp(128px, 18vw, 240px) minmax(0, 1fr);
      column-gap: clamp(10px, 2.2vw, 24px);
      align-items:center;
      justify-items:stretch;
    }
    .brandStepsPromptFigure{
      margin:0;
      position:relative;
      align-self:end;
      display:flex;
      align-items:flex-end;
      justify-content:flex-start;
    }
    .brandStepsPromptImage{
      display:block;
      width:clamp(124px, 17vw, 220px);
      height:auto;
      object-fit:contain;
      object-position:left bottom;
      transform: translateY(2px);
      filter: drop-shadow(0 12px 18px rgba(17,12,46,.16));
      pointer-events:none;
      user-select:none;
    }
    #brand-services.is-steps-bait .brandStepsPromptImage{
      transition: opacity .24s ease, transform .28s ease;
    }
    #brand-services.is-steps-bait .brandStepsPromptImage.is-swap-out{
      opacity:.08;
      transform: translateY(6px) scale(.972);
    }
    #brand-services.is-steps-bait .brandStepsPromptImage.is-answer{
      animation: brandPromptImageIn .44s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes brandPromptImageIn{
      0%{
        opacity:.22;
        transform: translateY(6px) scale(.975);
      }
      72%{
        opacity:1;
        transform: translateY(1px) scale(1.006);
      }
      100%{
        opacity:1;
        transform: translateY(2px) scale(1);
      }
    }
    .brandStepsPromptText{
      margin:0;
      text-align:left;
      text-wrap:balance;
      font-size:clamp(32px, 4.8vw, 58px);
      line-height:1.03;
      letter-spacing:-.03em;
      font-weight:950;
      font-style:italic;
      color:var(--ink);
      opacity:.98;
    }
    .brandStepsPromptText.brandPromptReveal{
      opacity:0;
      transform: translate3d(0, 18px, 0) scale(.986);
      filter: blur(5px);
      transition:
        opacity .46s cubic-bezier(.2,.75,.2,1),
        transform .52s cubic-bezier(.2,.75,.2,1),
        filter .46s cubic-bezier(.2,.75,.2,1);
      transition-delay: calc(var(--brand-delay, 0ms) + 34ms);
    }
    .brandStepsPromptText.brandPromptReveal.in{
      opacity:.98;
      transform: translate3d(0,0,0) scale(1);
      filter: blur(0);
    }
    .brandStepsPromptText em{
      position:relative;
      display:inline-block;
    }
    #brand-services.is-steps-bait .brandStepsPromptText.is-typing em::after{
      content:"";
      display:inline-block;
      width:.07em;
      height:.92em;
      margin-left:.08em;
      vertical-align:-.06em;
      border-radius:2px;
      background: currentColor;
      animation: brandPromptCaret .72s steps(1, end) infinite;
    }
    @keyframes brandPromptCaret{
      0%, 49%{ opacity:1; }
      50%, 100%{ opacity:0; }
    }
    #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText.is-answer{
      animation: brandPromptDone .42s cubic-bezier(.2,.8,.2,1);
    }
    #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText{
      justify-self:center;
      width:min(100%, 760px);
      text-align:center;
      margin-left:0;
      --brand-answer-shift-x:-100px;
      --brand-answer-scale:1;
    }
    #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText em{
      transform: translateX(var(--brand-answer-shift-x)) scale(var(--brand-answer-scale));
      transform-origin:50% 55%;
    }
    #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText.is-answer{
      --brand-answer-scale:1.16;
    }
    @keyframes brandPromptDone{
      0%{
        transform: translateY(1px) scale(.988);
        opacity:.84;
      }
      68%{
        transform: translateY(-1px) scale(1.01);
        opacity:1;
      }
      100%{
        transform: translateY(0) scale(1);
        opacity:1;
      }
    }
    html.dark .brandStepsPromptText{
      color:rgba(244,245,250,.96);
      text-shadow: 0 10px 26px rgba(102,225,255,.16);
    }
    html.dark .brandStepsPromptImage{
      filter: invert(1) grayscale(1) brightness(1.92) contrast(1.08);
    }
    #brand-services.is-steps-bait .brandStepsPrompt{
      cursor:pointer;
    }
    #brand-services.is-steps-bait .brandStepsPrompt:focus-visible{
      outline:2px solid rgba(129,216,208,.58);
      outline-offset:6px;
      border-radius:14px;
    }
    #brand-services.is-steps-bait .brandStepsPromptText{
      transition: transform .24s ease, text-shadow .24s ease, opacity .24s ease;
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsPrompt:hover .brandStepsPromptText,
    #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsPrompt:focus-visible .brandStepsPromptText{
      transform:translateY(-1px);
      text-shadow: 0 10px 22px rgba(129,216,208,.2);
      opacity:1;
    }
    #brand-services.is-steps-bait .brandProcessBridge,
    #brand-services.is-steps-bait .brandQuote,
    #brand-services.is-steps-bait .brandDetailColumns .brandDetailCard{
      transition: filter .34s ease, opacity .34s ease, transform .34s ease;
    }
    #brand-services.is-steps-bait .brandDetailColumns{
      position:relative;
    }
    #brand-services.is-steps-bait .brandStepsOverlayHint{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      z-index:5;
      display:block;
      width:auto;
      margin:0;
      color: rgba(15,24,40,.96);
      font-size: clamp(22px, 4.1vw, 56px);
      font-style:italic;
      font-weight:950;
      letter-spacing:-.03em;
      line-height:.96;
      white-space:nowrap;
      text-transform:uppercase;
      text-align:center;
      cursor:pointer;
      pointer-events:auto;
      user-select:none;
      text-shadow:none;
      transition: opacity .28s ease, transform .28s ease, color .28s ease;
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsOverlayHint:hover,
    #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsOverlayHint:focus-visible{
      transform: translate(-50%, -51.5%);
      color: rgba(12,20,36,.98);
      text-shadow:none;
    }
    html.dark #brand-services.is-steps-bait .brandStepsOverlayHint{
      color: rgba(236,246,255,.96);
      text-shadow:none;
    }
    html.dark #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsOverlayHint:hover,
    html.dark #brand-services.is-steps-bait:not(.is-steps-open) .brandStepsOverlayHint:focus-visible{
      color: rgba(246,252,255,.99);
      text-shadow: 0 1px 0 rgba(5,12,24,.72);
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandProcessBridge{
      filter: blur(3.6px);
      opacity:.48;
      transform: translateY(2px);
      pointer-events:none;
      user-select:none;
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandDetailColumns{
      pointer-events:auto;
      user-select:none;
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandDetailColumns .brandDetailCard{
      filter: blur(5px);
      opacity:.46;
      transform: translateY(4px);
      pointer-events:none;
    }
    #brand-services.is-steps-bait:not(.is-steps-open) .brandQuote{
      filter: blur(4px);
      opacity:.42;
      transform: translateY(5px);
      pointer-events:none;
      user-select:none;
    }
    #brand-services.is-steps-bait.is-steps-open .brandProcessBridge,
    #brand-services.is-steps-bait.is-steps-open .brandQuote{
      filter:none;
      opacity:1;
      transform:none;
      pointer-events:auto;
      user-select:auto;
    }
    #brand-services.is-steps-bait.is-steps-open .brandProcessBridge{
      animation: brandHiddenRevealBridge .54s cubic-bezier(.2,.82,.2,1) both;
      animation-delay:.02s;
    }
    #brand-services.is-steps-bait.is-steps-open .brandDetailColumns{
      pointer-events:auto;
      user-select:auto;
    }
    #brand-services.is-steps-bait.is-steps-open .brandDetailColumns .brandDetailCard{
      filter:none;
      opacity:1;
      animation: brandHiddenRevealCard .58s cubic-bezier(.2,.82,.2,1) both;
    }
    #brand-services.is-steps-bait.is-steps-open .brandDetailColumns .brandDetailCard:nth-of-type(1){
      animation-delay:.06s;
    }
    #brand-services.is-steps-bait.is-steps-open .brandDetailColumns .brandDetailCard:nth-of-type(2){
      animation-delay:.12s;
    }
    #brand-services.is-steps-bait.is-steps-open .brandQuote{
      animation: brandHiddenRevealQuote .62s cubic-bezier(.2,.82,.2,1) both;
      animation-delay:.16s;
    }
    #brand-services.is-steps-bait.is-steps-open .brandStepsOverlayHint{
      opacity:0;
      transform: translate(-50%, -45%);
      pointer-events:none;
    }
    @keyframes brandHiddenRevealBridge{
      0%{
        opacity:.36;
        filter: blur(4px);
        transform: translateY(6px) scale(.992);
      }
      100%{
        opacity:1;
        filter: blur(0);
        transform: translateY(0) scale(1);
      }
    }
    @keyframes brandHiddenRevealCard{
      0%{
        opacity:.12;
        filter: blur(8px);
        transform: translateY(14px) scale(.976);
      }
      64%{
        opacity:1;
        filter: blur(1.2px);
      }
      100%{
        opacity:1;
        filter: blur(0);
        transform: translateY(0) scale(1);
      }
    }
    @keyframes brandHiddenRevealQuote{
      0%{
        opacity:.1;
        filter: blur(8px);
        transform: translateY(16px) scale(.978);
      }
      62%{
        opacity:1;
        filter: blur(1.4px);
      }
      100%{
        opacity:1;
        filter: blur(0);
        transform: translateY(0) scale(1);
      }
    }
    .brandProcessBridge{
      margin:8px auto 8px;
      width:min(1000px, 94%);
      height:66px;
      position:relative;
    }
    .brandProcessBridgeSvg{
      width:100%;
      height:100%;
      display:block;
      overflow:visible;
      shape-rendering: geometricPrecision;
    }
    .brandProcessBridgePath{
      fill:none;
      stroke:url(#brandProcessBridgeGrad);
      stroke-width:2.15;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect: non-scaling-stroke;
      opacity:.84;
      transition: opacity .26s ease, stroke-width .26s ease;
    }
    .brandProcessBridge.is-center-active .brandProcessBridgePathMain,
    .brandProcessBridge.is-left-active .brandProcessBridgePathMain,
    .brandProcessBridge.is-left-active .brandProcessBridgePathSplitL,
    .brandProcessBridge.is-right-active .brandProcessBridgePathMain,
    .brandProcessBridge.is-right-active .brandProcessBridgePathSplitR{
      opacity:.92;
      stroke-width:2.2;
    }
    .brandProcessBridgeFlow{
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-width:2.2;
      vector-effect: non-scaling-stroke;
      opacity:0;
      transition: opacity .2s ease;
      will-change: opacity;
      animation:none;
    }
    .brandProcessBridgeFlowMain{
      stroke:url(#brandProcessBridgeFlowGradMain);
      stroke-width:2.3;
    }
    .brandProcessBridgeFlowSplitL{
      stroke:url(#brandProcessBridgeFlowGradLeft);
      stroke-width:2.15;
    }
    .brandProcessBridgeFlowSplitR{
      stroke:url(#brandProcessBridgeFlowGradRight);
      stroke-width:2.15;
    }
    .brandProcessBridge.is-center-active .brandProcessBridgeFlowMain,
    .brandProcessBridge.is-left-active .brandProcessBridgeFlowMain,
    .brandProcessBridge.is-left-active .brandProcessBridgeFlowSplitL,
    .brandProcessBridge.is-right-active .brandProcessBridgeFlowMain,
    .brandProcessBridge.is-right-active .brandProcessBridgeFlowSplitR{
      opacity:.98;
    }
    .brandProcessBridgeArrow{
      fill: rgba(129,216,208,.9);
      opacity:.88;
      transition: opacity .2s ease, fill .2s ease;
      transform-origin:center;
    }
    .brandProcessBridgeNodeHalo{
      fill: rgba(129,216,208,.56);
      opacity:0;
      filter: blur(4.4px);
      transform-origin:center;
      transition: opacity .22s ease, fill .22s ease;
    }
    .brandProcessBridgeNode{
      fill: rgba(129,216,208,.9);
      stroke: rgba(129,216,208,.38);
      stroke-width:1.8;
      vector-effect: non-scaling-stroke;
      shape-rendering: geometricPrecision;
      paint-order: stroke fill;
      opacity:.82;
      transition: opacity .2s ease, fill .2s ease, stroke .2s ease, stroke-width .2s ease;
    }
    .brandProcessBridge.is-center-active .brandProcessBridgeNode--center,
    .brandProcessBridge.is-left-active .brandProcessBridgeNode--left,
    .brandProcessBridge.is-right-active .brandProcessBridgeNode--right{
      opacity:1;
      fill: rgba(218,255,250,.99);
      stroke: rgba(129,216,208,.84);
      stroke-width:2.15;
      filter: drop-shadow(0 0 9px rgba(129,216,208,.78));
    }
    .brandProcessBridge.is-left-active .brandProcessBridgeNode--center,
    .brandProcessBridge.is-right-active .brandProcessBridgeNode--center{
      opacity:.94;
      fill: rgba(204,252,246,.98);
      stroke: rgba(129,216,208,.7);
      stroke-width:1.95;
      filter: drop-shadow(0 0 6px rgba(129,216,208,.48));
    }
    .brandProcessBridge.is-center-active .brandProcessBridgeNodeHalo--center,
    .brandProcessBridge.is-left-active .brandProcessBridgeNodeHalo--left,
    .brandProcessBridge.is-right-active .brandProcessBridgeNodeHalo--right{
      opacity:.82;
      fill: rgba(129,216,208,.62);
    }
    .brandProcessBridge.is-left-active .brandProcessBridgeNodeHalo--center,
    .brandProcessBridge.is-right-active .brandProcessBridgeNodeHalo--center{
      opacity:.42;
      fill: rgba(129,216,208,.46);
    }
    .brandProcessBridge.is-active .brandProcessBridgeArrow{
      opacity:.98;
      fill: rgba(198,252,246,.98);
    }
    .brandLeadLabel{
      font-size:11px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted2);
    }
    .brandLeadSection{
      margin-top:2px;
      margin-bottom:2px;
      padding-top:2px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--ink);
    }
    .brandLeadSectionOptional{
      margin-top:8px;
      padding-top:14px;
      border-top:1px solid rgba(166,173,186,.22);
    }
    .brandLeadInput,
    .brandLeadTextarea{
      width:100%;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.025);
      color:var(--ink);
      font:inherit;
      padding:10px 11px;
      outline:none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .brandLeadTextarea{
      min-height:90px;
      resize:vertical;
      line-height:1.52;
    }
    .brandLeadInput:focus,
    .brandLeadTextarea:focus{
      border-color: rgba(129,216,208,.72);
      box-shadow: 0 0 0 4px rgba(129,216,208,.14);
      background: rgba(5,8,14,.24);
    }
    .brandLeadHoneypot{
      position:absolute;
      opacity:0;
      pointer-events:none;
      width:1px;
      height:1px;
      transform: translateX(-200vw);
    }
    .brandLeadSubmit{
      margin-top:4px;
      width:100%;
      font-size:14px;
      font-weight:900;
      min-height:44px;
    }
    .brandLeadStatus{
      min-height:18px;
      color:var(--muted2);
      font-size:12px;
      line-height:1.45;
    }
    .brandLeadStatus.is-error{ color:#f86d83; }
    .brandLeadStatus.is-success{ color:#4ec6b9; }
    .brandFunnelReplyTime{
      grid-row:auto;
      align-self:start;
      margin-top:14px;
      color:rgba(188,198,214,.82);
      font-size:12px;
      line-height:1.45;
      font-weight:700;
      text-wrap:pretty;
    }
    html:not(.dark) .brandFunnelReplyTime{
      color:rgba(94,107,126,.9);
    }
    html.dark .b2gFormAside{
      border-color: rgba(162,177,199,.22);
      background: rgba(255,255,255,.02);
    }
    .brandContactWrap{
      border-radius:24px;
    }
    .brandContactWrap .contactBox{
      border-radius:24px;
      border-color: rgba(176,189,207,.26);
      background:
        radial-gradient(110% 85% at 0% -10%, rgba(129,216,208,.16), transparent 66%),
        radial-gradient(110% 90% at 100% 110%, rgba(129,216,208,.11), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 20px 52px rgba(8,10,16,.18);
      padding:16px;
    }
    html.dark .brandContactWrap .contactBox{
      border-color: rgba(182,194,214,.22);
      background:
        radial-gradient(110% 85% at 0% -10%, rgba(129,216,208,.18), transparent 66%),
        radial-gradient(110% 90% at 100% 110%, rgba(129,216,208,.12), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 24px 66px rgba(0,0,0,.34);
    }
    .brandContactWrap .contactInner{
      grid-template-columns: 1.05fr .95fr;
      gap:12px;
      align-items:stretch;
    }
    .brandContactWrap .contactBg{
      opacity:.14;
      background-size: 980px auto;
      background-position: 50% 10%;
      filter: grayscale(1) contrast(1.04) blur(9px);
      mix-blend-mode: soft-light;
    }
    html.dark .brandContactWrap .contactBg{
      opacity:.16;
      filter: grayscale(1) contrast(1.08) blur(10px);
      mix-blend-mode: screen;
    }
    .brandContactWrap .contactPanel,
    .brandContactWrap .miniBrief{
      height:100%;
      margin-top:0 !important;
    }
    .brandContactWrap .contactLead{
      max-width:60ch;
    }
    .brandContactWrap .contactActions{
      margin-top:12px;
    }
    .brandContactWrap .briefText{
      margin-top:10px;
    }
    .brandContactNotice{
      margin-top:8px;
      min-height:18px;
      color:var(--muted2);
      font-size:12px;
      font-weight:800;
      letter-spacing:.01em;
      opacity:0;
      transform: translateY(4px);
      transition: opacity .22s ease, transform .22s ease, color .22s ease;
    }
    .brandContactNotice.is-visible{
      opacity:1;
      transform: translateY(0);
    }
    #b2g-contact.brandContactWrap .contactBox{
      padding:20px;
    }
    #b2g-contact.brandContactWrap .contactInner{
      grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
      max-width:100%;
      margin:0 auto;
      padding:0;
      align-items:start;
    }
    #b2g-contact.brandContactWrap .contactPanel{
      border:none;
      border-radius:0;
      background:none;
      padding:16px 12px 10px;
      overflow:visible;
    }
    #b2g-contact.brandContactWrap .contactPanel::before{
      display:none;
    }
    #b2g-contact.brandContactWrap .contactHint{
      margin-top:14px;
      max-width:48ch;
      font-size:14px;
    }
    #b2g-contact.brandContactWrap .contactActions{
      margin-top:16px;
    }
    #b2g-contact.brandContactWrap .contactCommunity{
      margin-top:14px;
    }
    #b2g-contact.brandContactWrap .emailRow{
      margin-top:16px;
    }
    #b2g-contact.brandContactWrap .foot{
      margin-top:12px;
    }
    #b2g-contact.brandContactWrap .b2gContactMeta{
      align-self:stretch;
      padding:18px 8px 8px 18px;
      border-left:1px solid rgba(176,189,207,.18);
      display:grid;
      align-content:start;
      gap:14px;
    }
    html.dark #b2g-contact.brandContactWrap .b2gContactMeta{
      border-left-color: rgba(184,194,211,.16);
    }
    .b2gContactMetaLabel{
      font-size:12px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted2);
    }
    .b2gContactMetaText{
      margin:0;
      max-width:34ch;
      color:var(--muted);
      font-size:14px;
      line-height:1.65;
      text-wrap:pretty;
    }
    .b2gContactMetaList{
      display:grid;
      gap:10px;
    }
    .b2gContactMetaItem{
      padding-top:10px;
      border-top:1px solid rgba(176,189,207,.16);
      color:var(--ink);
      font-size:14px;
      line-height:1.5;
      font-weight:700;
    }
    html.dark .b2gContactMetaItem{
      border-top-color: rgba(184,194,211,.14);
    }
    @media (max-width: 1120px){
      .brandContactWrap .contactInner{
        grid-template-columns:1fr;
      }
      #b2g-contact.brandContactWrap .b2gContactMeta{
        padding:4px 12px 10px;
        border-left:none;
        border-top:1px solid rgba(176,189,207,.18);
      }
      html.dark #b2g-contact.brandContactWrap .b2gContactMeta{
        border-top-color: rgba(184,194,211,.16);
      }
    }
    @media (max-width: 900px){
      #b2g-contact.brandContactWrap .contactInner{
        grid-template-columns:1fr !important;
        gap:14px;
      }
      #b2g-contact.brandContactWrap .contactPanel,
      #b2g-contact.brandContactWrap .b2gContactMeta{
        min-width:0;
        width:100%;
      }
      #b2g-contact.brandContactWrap .b2gContactMeta{
        padding:8px 12px 0;
        border-left:none !important;
        border-top:1px solid rgba(176,189,207,.18);
      }
      html.dark #b2g-contact.brandContactWrap .b2gContactMeta{
        border-top-color: rgba(184,194,211,.16);
      }
      #b2g-contact.brandContactWrap .contactActions{
        grid-template-columns:1fr;
      }
      #b2g-contact.brandContactWrap .contactCommunity{
        display:grid;
        gap:10px;
      }
      #b2g-contact.brandContactWrap .contactCommunity .btn{
        width:100%;
        min-width:0;
      }
      #b2g-contact.brandContactWrap .emailRow{
        align-items:flex-start;
      }
    }
    @media (max-width: 560px){
      #b2g-contact.brandContactWrap .contactBox{
        padding:16px;
      }
      #b2g-contact.brandContactWrap .contactPanel{
        padding:8px 4px 6px;
      }
      #b2g-contact.brandContactWrap .b2gContactMeta{
        padding:10px 4px 0;
      }
      #b2g-contact.brandContactWrap .contactHint,
      #b2g-contact.brandContactWrap .b2gContactMetaText{
        max-width:none;
      }
      #b2g-contact.brandContactWrap .emailRow{
        display:grid;
        gap:12px;
      }
      #b2g-contact.brandContactWrap .emailRow .btn{
        width:100%;
      }
      #b2g-contact.brandContactWrap .foot{
        margin-top:8px;
      }
    }
    @keyframes brandIntroFog{
      0%{ transform: translate3d(-2%, -1%, 0) scale(1); }
      50%{ transform: translate3d(2%, 2%, 0) scale(1.03); }
      100%{ transform: translate3d(-2%, -1%, 0) scale(1); }
    }
    @keyframes brandIntroLines{
      0%{ transform: translate3d(0, 0, 0); opacity:.2; }
      50%{ transform: translate3d(-1.8%, 2%, 0); opacity:.3; }
      100%{ transform: translate3d(0, 0, 0); opacity:.2; }
    }
    @keyframes brandOrbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-8px,0); }
    }
    @keyframes brandParticleDrift{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-9px,0); }
    }
    @keyframes brandIntroWordIn{
      0%{ opacity:0; filter: blur(14px); transform: translate3d(var(--intro-word-shift-x), var(--intro-word-shift-y), 0) scale(.97); }
      55%{ opacity:1; filter: blur(5px); transform: translate3d(calc(var(--intro-word-shift-x) * .18), 4px, 0) scale(.995); }
      100%{ opacity:1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
    }
    @keyframes brandCubeSpin{
      0%{ transform: rotateZ(0deg); }
      50%{ transform: rotateZ(180deg); }
      100%{ transform: rotateZ(360deg); }
    }
    @keyframes brandIconPulse{
      0%{ box-shadow: 0 0 0 0 rgba(129,216,208,.42); opacity:.9; }
      70%{ box-shadow: 0 0 0 7px rgba(129,216,208,0); opacity:.25; }
      100%{ box-shadow: 0 0 0 0 rgba(129,216,208,0); opacity:.9; }
    }
    @keyframes brandB2gRailSweep{
      0%,20%{ transform: translateX(-120%); opacity:0; }
      38%{ opacity:.9; }
      56%,100%{ transform: translateX(130%); opacity:0; }
    }
    @keyframes brandB2gRailExit{
      0%{ transform: translateY(-50%) translateX(0) scale(1); opacity:1; }
      100%{ transform: translateY(-50%) translateX(20px) scale(.97); opacity:0; }
    }
    @keyframes brandIntroB2gExit{
      0%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
      100%{ opacity:0; transform: translateY(-6px) scale(.992); filter: blur(2px); }
    }
    @media (max-width: 1120px){
      .b2gIntroGrid{
        grid-template-columns:1fr;
      }
      .b2gIntroMain{
        min-height:auto;
      }
      .b2gIntroPanel{
        min-height:112px;
      }
      .brandCapabilities{ grid-template-columns:repeat(2, minmax(0,1fr)); }
      .brandCaseGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
      .brandHowGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
      .brandHowGrid .brandHowCard:last-child{ grid-column:1 / -1; }
      .brandFunnelGrid{ grid-template-columns:1fr; }
      .brandIntroB2gRail{
        left:calc(100% + 14px);
        right:auto;
        min-width:168px;
      }
      .brandIntroB2gRail--left{
        left:auto;
        right:calc(100% + 14px);
      }
      .brandFunnelInfo{
        align-self:auto;
        align-content:start;
        min-height:auto;
        padding-block:0;
        grid-template-rows:auto;
      }
      .b2gFormInfo{
        gap:8px;
      }
      .brandStepsGrid{ grid-template-columns:1fr; }
      .b2gArticleNav{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }
    @media (max-width: 1120px){
      .brandIntroB2gMobile{
        position:relative;
        display:grid;
        gap:2px;
        margin:0 0 12px;
        padding:12px 40px 12px 14px;
        border-radius:16px;
        border:1px solid rgba(129,216,208,.38);
        background:
          linear-gradient(140deg, rgba(8,14,24,.78), rgba(7,12,21,.58)),
          radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.2), rgba(129,216,208,0) 72%);
        text-decoration:none;
        box-shadow:
          0 10px 28px rgba(7,10,18,.24),
          0 0 0 1px rgba(129,216,208,.1);
        animation: brandB2gRailFadeIn .44s ease .18s both;
      }
      .brandIntroB2gMobileLabel{
        color:rgba(232,246,250,.96);
        font-size:13px;
        line-height:1.16;
        font-weight:900;
        letter-spacing:.03em;
        text-transform:uppercase;
      }
      .brandIntroB2gMobileHint{
        color:rgba(188,206,222,.82);
        font-size:11px;
        line-height:1.24;
        font-weight:750;
        letter-spacing:.03em;
      }
      .brandIntroB2gMobileArrow{
        position:absolute;
        right:14px;
        top:50%;
        width:10px;
        height:10px;
        margin-top:-6px;
        border-top:2px solid rgba(214,236,244,.94);
        border-right:2px solid rgba(214,236,244,.94);
        transform: rotate(45deg);
      }
      html:not(.dark) .brandIntroB2gMobile{
        background:
          linear-gradient(140deg, rgba(252,254,255,.94), rgba(244,249,252,.88)),
          radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.18), rgba(129,216,208,0) 72%);
        border-color: rgba(136,204,195,.48);
        box-shadow:
          0 10px 24px rgba(17,12,46,.1),
          0 0 0 1px rgba(136,204,195,.14);
      }
      html:not(.dark) .brandIntroB2gMobileLabel{
        color:rgba(22,52,68,.92);
      }
      html:not(.dark) .brandIntroB2gMobileHint{
        color:rgba(62,88,106,.72);
      }
      html:not(.dark) .brandIntroB2gMobileArrow{
        border-top-color: rgba(62,88,106,.9);
        border-right-color: rgba(62,88,106,.9);
      }
      .brandIntroB2gRail{
        display:none;
      }
    }
    @media (max-width: 760px){
      .b2gIntro{
        border-radius:18px;
        padding:14px;
      }
      .b2gIntroGrid{
        gap:10px;
      }
      .b2gIntroMain{
        gap:10px;
      }
      .b2gIntroKicker{
        padding:5px 10px;
        font-size:10px;
      }
      .b2gIntroTitle{
        font-size:clamp(28px, 10.2vw, 46px);
        line-height:.98;
      }
      .b2gIntroSub{
        font-size:14px;
        line-height:1.5;
      }
      .b2gIntroActions{
        gap:8px;
      }
      .b2gIntroActions .btn{
        width:100%;
        justify-content:center;
      }
      .b2gIntroMeta{
        gap:6px;
      }
      .b2gIntroMetaTag{
        min-height:28px;
        padding:0 10px;
        font-size:11px;
      }
      .b2gIntroPanel{
        border-radius:12px;
        padding:10px;
      }
      .b2gIntroPanelCopy{
        font-size:14px;
        line-height:1.42;
      }
      .brandFlow{ gap:14px; margin-top:18px; }
      .brandIntro{ border-radius:24px; min-height:260px; padding:24px 16px; }
      .brandIntroTitle{ font-size:clamp(30px, 8.8vw, 44px); }
      .brandIntroSub{ margin-top:12px; font-size:14px; }
      .brandIntroLead{ margin-top:10px; font-size:13px; line-height:1.56; }
      .brandIntroQuote{
        margin-top:10px;
        padding:9px 11px;
        font-size:12.5px;
        line-height:1.5;
      }
      .brandIntroCubeWrap{
        width:74px;
        height:74px;
        top:10px;
        right:10px;
      }
      .brandIntroTitle .brandIntroWord{
        filter: blur(10px);
        transform: translate3d(var(--intro-word-shift-x), calc(var(--intro-word-shift-y) * .62), 0) scale(.98);
      }
      .brandIntroTitle .brandIntroWord:nth-child(1){ --intro-word-shift-x: -16px; --intro-word-shift-y: 18px; }
      .brandIntroTitle .brandIntroWord:nth-child(2){ --intro-word-shift-x: 9px; --intro-word-shift-y: 16px; }
      .brandIntroTitle .brandIntroWord:nth-child(3){ --intro-word-shift-x: 18px; --intro-word-shift-y: 18px; }
      .brandBusiness{ border-radius:20px; padding:16px; }
      .brandBusinessTitle{ font-size:clamp(24px, 6.2vw, 34px); }
      .brandBusinessSub{ font-size:14px; line-height:1.55; }
      .brandCapabilities{ grid-template-columns:1fr; gap:10px; margin-top:14px; }
      .brandCapability{ padding:12px; }
      .brandCapabilityTitle{ font-size:19px; }
      .brandCapabilityText{ margin-top:8px; font-size:13px; line-height:1.52; }
      .brandHow{ border-radius:18px; padding:14px; }
      .brandHowSub{ margin-top:5px; font-size:14px; line-height:1.5; }
      .brandHowGrid{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
      .brandHowCard{ padding:12px; gap:8px; }
      .brandHowCardTitle{ font-size:17px; }
      .brandHowCardText{ font-size:12.5px; line-height:1.46; }
      .brandHowCardWide{ padding:12px; }
      .brandHowCardWide .brandHowCardTitle{ max-width:none; }
      .brandHowCardWide .brandHowCardText{ max-width:none; font-size:12.5px; line-height:1.46; }
      .brandHowB2g{ margin-top:10px; border-radius:14px; }
      .brandHowB2gSummary{
        grid-template-columns:auto 1fr auto;
        padding:11px 11px;
        gap:8px 9px;
      }
      .brandHowB2gBadge{
        min-width:40px;
        height:22px;
        font-size:10px;
      }
      .brandHowB2gTitle{
        font-size:13.5px;
      }
      .brandHowB2gHint{
        grid-column:1 / 3;
        margin-left:2px;
        white-space:normal;
      }
      .brandHowB2gBody{
        padding:0 11px 11px;
        gap:8px;
      }
      .brandHowB2gIntro,
      .brandHowB2gList li{
        font-size:12.5px;
        line-height:1.46;
      }
      .brandHowB2gNote{
        padding:9px 10px;
        font-size:12px;
        line-height:1.44;
      }
      .brandHowB2gPageBtn{
        width:100%;
      }
      .brandHowNote{ margin-top:10px; padding:9px 10px; font-size:12px; line-height:1.45; }
      .brandDetailColumns{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
      .b2gLegalColumns{ margin-top:14px; }
      .brandDetailTitle{ font-size:18px; }
      .brandDetailList li{ font-size:12.5px; line-height:1.46; }
      .b2gArticle{
        gap:10px;
      }
      .b2gArticleNav{
        grid-template-columns:1fr;
        gap:6px;
      }
      .b2gArticleTab{
        min-height:40px;
        font-size:12.5px;
        line-height:1.28;
        padding:9px 10px;
      }
      .b2gArticlePanel{
        border-radius:14px;
        padding:10px;
      }
      .b2gArticleLead,
      .b2gArticleText{
        font-size:14px;
        line-height:1.62;
      }
      .brandQuote{ margin-top:14px; padding:14px 12px; border-radius:16px; }
      .brandQuoteMark{
        font-size:30px;
        margin-bottom:2px;
      }
      .brandQuoteText{ font-size:clamp(16px, 5vw, 22px); }
      .brandCtaRow{ margin-top:14px; }
      .brandCtaBtn{ width:100%; max-width:340px; }
      .brandPortfolio{ border-radius:18px; padding:14px; }
      .brandPortfolioSub{ margin-top:5px; font-size:14px; line-height:1.5; }
      .brandCaseGrid{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
      .brandRepGrid{ grid-template-columns:1fr; }
      .brandRepCard--dima,
      .brandRepCard--portrait{
        grid-template-columns:1fr;
        grid-template-areas:
          "photo"
          "body";
        row-gap:10px;
        align-items:start;
      }
      .brandRepCard--dima .brandRepPhoto--real,
      .brandRepCard--portrait .brandRepPhoto--real{
        width:min(100%, 160px);
        margin-inline:auto;
      }
      .brandRepCard--dima .brandRepBody,
      .brandRepCard--portrait .brandRepBody{
        max-width:none;
        gap:8px;
      }
      .brandRepCard--dima .brandRepRole::after,
      .brandRepCard--portrait .brandRepRole::after{
        width:100%;
        margin-top:7px;
        opacity:.84;
      }
      .brandRepCard--dima .brandRepDesc,
      .brandRepCard--portrait .brandRepDesc{
        font-size:13px;
        line-height:1.52;
      }
      .brandCaseMedia{ height:100px; }
      .brandCaseTitle{ font-size:16px; }
      .brandCaseList li{ font-size:12.5px; line-height:1.42; }
      .brandCaseMeta{ font-size:10px; }
      .brandRepPhoto{ height:144px; border-radius:12px; }
      .brandRepPhoto--real{
        width:min(100%, 160px);
        height:auto;
        aspect-ratio:3 / 4;
      }
      .brandRepPhoto--real .brandRepPhotoImg{ object-position:center center; transform:none; }
      .brandRepAvatar{ font-size:28px; }
      .brandRepAvatar::before{ width:78px; height:78px; border-radius:22px; }
      .brandRepPhotoName{ font-size:16px; left:10px; right:10px; bottom:8px; }
      .brandRepDesc{ font-size:12.5px; line-height:1.46; }
      .brandFunnel{ border-radius:18px; padding:14px; }
      .brandFunnelSub{ font-size:15px; line-height:1.56; }
      .brandFunnelList{ gap:7px; }
      .brandFunnelList li{ font-size:12.5px; line-height:1.44; }
      .brandLeadForm{ border-radius:14px; padding:12px; }
      .b2gFormAside{
        border-radius:12px;
        padding:9px 10px;
      }
      .b2gFormAsideTitle{
        font-size:13px;
      }
      .b2gFormAsideText{
        margin-top:5px;
        font-size:12.5px;
        line-height:1.52;
      }
      .brandContactWrap .contactBox{ border-radius:18px; padding:14px; }
      .brandContactWrap .contactPanel{ padding:14px; }
      .brandContactWrap .miniBrief{ padding:14px; }
      .brandContactWrap .contactActions{ grid-template-columns:1fr; }
      .brandContactWrap .contactCommunity .btn{ width:100%; min-width:0; }
      .brandSteps{ margin-top:12px; padding-top:12px; }
      .brandStepsGrid{ grid-template-columns:1fr; gap:8px; }
      .brandStepTitle{ font-size:17px; }
      .brandStepText{ font-size:12.5px; line-height:1.42; }
      .brandStepsPrompt{
        min-height:92px;
        padding:12px 6px 0;
        grid-template-columns: clamp(98px, 28vw, 134px) minmax(0, 1fr);
        column-gap:10px;
      }
      .brandStepsPromptImage{
        width:clamp(96px, 26vw, 132px);
      }
      .brandStepsPromptText{
        font-size:clamp(24px, 7.2vw, 40px);
      }
      #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText{
        width:100%;
        margin-left:0;
        --brand-answer-shift-x:clamp(-24px, -2.5vw, -8px);
        --brand-answer-scale:1;
      }
      #brand-services.is-steps-bait.is-steps-open .brandStepsPromptText.is-answer{
        --brand-answer-scale:1.1;
      }
      #brand-services.is-steps-bait .brandStepsOverlayHint{
        width:auto;
        font-size: clamp(14px, 4.7vw, 22px);
        line-height:.98;
      }
      .brandProcessBridge{
        width:min(420px, 82%);
        height:44px;
        margin:8px auto 6px;
      }
      .brandProcessBridgePathSplit,
      .brandProcessBridgeFlowSplitL,
      .brandProcessBridgeFlowSplitR,
      .brandProcessBridgeNodeHalo--left,
      .brandProcessBridgeNodeHalo--right,
      .brandProcessBridgeNode--left,
      .brandProcessBridgeNode--right{
        display:none;
      }
      .brandProcessBridgePathMain{
        stroke-width:2.2;
      }
      .brandProcessBridgeFlowMain{
        stroke-width:2.2;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .brandBlockAnim{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }
      .brandInnerAnim{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }
      .brandStepsPromptText.brandPromptReveal{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }
      .brandServicesCardAnim{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }
      .brandIntro{
        transform:none !important;
      }
      .brandIntroTitle .brandIntroWord{
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
        animation:none !important;
      }
      .brandIntroContent,
      .brandIntroWaves,
      .brandIntroShapes,
      .brandIntroGlow,
      .brandIntroGlass{
        transform:none !important;
      }
      .brandIntroGlass{
        opacity:0 !important;
        transition:none !important;
      }
      .brandTentacles,
      .brandIntro::before,
      .brandIntro::after,
      .brandIntroWaves path,
      .brandIntroShape,
      .brandIntroParticle,
      .brandIntroCubeSpin,
      .brandCapabilityIcon::after{
        animation:none !important;
      }
      .brandCapability:hover,
      .brandCapability:focus-within,
      .brandStepCard:hover,
      .brandStepCard:focus-within,
      .brandDetailCard:hover,
      .brandDetailCard:focus-within,
      .brandCaseCard:hover,
      .brandCaseCard:focus-within{
        transform:none;
      }
      .brandProcessBridgePath{
        transition:none !important;
      }
      .brandStepsLine::after{
        animation:none !important;
        transition:none !important;
      }
      .brandProcessBridgeFlow{
        animation:none !important;
        transition:none !important;
      }
      .brandProcessBridgeNode,
      .brandProcessBridgeNodeHalo,
      .brandProcessBridgeArrow{
        transition:none !important;
        animation:none !important;
      }
      #brand-services.is-steps-bait.is-steps-open .brandProcessBridge,
      #brand-services.is-steps-bait.is-steps-open .brandDetailColumns .brandDetailCard,
      #brand-services.is-steps-bait.is-steps-open .brandQuote{
        animation:none !important;
      }
      #brand-services.is-steps-bait .brandStepsPromptImage,
      #brand-services.is-steps-bait .brandStepsPromptImage.is-answer{
        transition:none !important;
        animation:none !important;
      }
      #brand-services.is-steps-bait .brandStepsPromptText.is-typing em::after,
      #brand-services.is-steps-bait .brandStepsPromptText.is-answer{
        animation:none !important;
      }
    }
    .hero{
      position:relative;
      border-radius:28px;
      border:1px solid var(--line);
      background: var(--paperGlass);
      box-shadow: 0 18px 55px rgba(17,12,46,.12);
      overflow:hidden;
      isolation:isolate;
    }

    .heroBanner{
      display:none;
      position:absolute; inset:-1px;
      border-radius:28px;
      pointer-events:none;
      background-image: none;
      opacity:.22;
      filter: grayscale(1) contrast(1.10);
      mix-blend-mode:multiply;
      mask-image: radial-gradient(80% 55% at 50% 28%, #000 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(80% 55% at 50% 28%, #000 0%, transparent 70%);
      transform: none;
    }
    html.dark .heroBanner{ opacity:.14; filter: invert(1) grayscale(1) contrast(1.10); mix-blend-mode:screen; }

    .tentacles{
      position:absolute;
      inset:-1px;
      pointer-events:none;
      z-index:1;
      opacity:.44;
      mix-blend-mode:normal;
      filter:none;
    }
    html.dark .tentacles{
      opacity:.34;
      mix-blend-mode:normal;
    }

    .heroInner{ position:relative; z-index:2; isolation:isolate; padding:44px 10px; }

    .pill{
      display:inline-flex; align-items:center; gap:10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      padding:10px 14px;
      font-size:13px;
      color:var(--muted);
      font-weight:700;
    }
    .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 5px rgba(129,216,208,.18); }
    html.dark .dot{ box-shadow:0 0 0 5px rgba(129,216,208,.22); }

    h1{ margin:18px 0 0; font-weight:950; letter-spacing:-0.04em; line-height:1.02; font-size:42px; }
    .heroLead{ margin-top:14px; max-width:680px; color:var(--muted); font-size:18px; line-height:1.65; }
    @media (max-width: 420px){
      h1{ font-size:34px; }
      .heroLead{ font-size:15px; }
      .pill{ font-size:12px; padding:8px 12px; }
      .cardTitle{ font-size:17px; }
      .cardText{ font-size:13px; }
    }

    .heroGrid{ margin-top:26px; display:grid; gap:16px; position:relative; z-index:1; }
    .heroGrid > div{ position:relative; z-index:1; }
    .kpis{ margin-top:22px; display:grid; gap:10px; grid-template-columns: repeat(1, minmax(0,1fr)); }

    .card{
      position:relative;
      z-index:1;
      border-radius:22px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      padding:16px;
      box-shadow: 0 18px 55px rgba(17,12,46,.10);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card:hover{ transform: translateY(-2px); box-shadow: 0 18px 55px rgba(17,12,46,.14); }

    .cardTitle{ font-weight:900; font-size:18px; letter-spacing:-0.02em; }
    .cardText{ margin-top:8px; color:var(--muted); font-size:13px; line-height:1.6; }
    .servicesTabs{
      margin-top:18px;
      position:relative;
      --service-arrow-size: 60px;
      --service-arrow-gap: 18px;
      --service-arrow-top: clamp(98px, 18vw, 140px);
      --service-media-active: clamp(230px, 28vw, 300px);
      --service-media-active-wide: clamp(260px, 30vw, 340px);
      --service-media-active-mobile: clamp(180px, 48vw, 230px);
      --service-ease: cubic-bezier(.22,.74,.25,1);
    }
    .servicesTabsList{
      display:grid;
      gap:12px;
      grid-template-columns: repeat(3, minmax(0,1fr));
      align-items:stretch;
      transition: gap .3s var(--service-ease);
      position:relative;
      z-index:1;
    }
    .servicesTabs.has-active .servicesTabsList{
      grid-template-columns: minmax(0,1fr);
      gap:0;
    }
    .serviceTab{
      text-align:left;
      width:100%;
      cursor:pointer;
      background: var(--paperGlass2);
      background-image: linear-gradient(140deg, rgba(129,216,208,0) 0%, rgba(129,216,208,.14) 100%);
      background-size: 220% 220%;
      background-position: 100% 0%;
      background-repeat: no-repeat;
      color: var(--ink);
      transition: transform .42s var(--service-ease), box-shadow .38s var(--service-ease), border-color .38s var(--service-ease), background-position .55s var(--service-ease), opacity .32s var(--service-ease), filter .32s var(--service-ease);
      will-change: transform, opacity, filter;
    }
    .serviceTab.is-active{
      border-color: rgba(129,216,208,.6);
      box-shadow: 0 12px 34px rgba(129,216,208,.18);
      transform: translateY(-2px);
      overflow:hidden;
    }
    .serviceTab:not(.is-active):hover{
      transform: translateY(-2px);
      border-color: rgba(129,216,208,.55);
      box-shadow: 0 18px 40px rgba(17,12,46,.16), 0 0 0 1px rgba(129,216,208,.12);
      background-position: 0% 100%;
    }
    .servicesTabs.has-active .serviceTab{
      display:none;
    }
    .servicesTabs.has-active .serviceTab.is-active{
      display:block;
      grid-column:1;
      position:relative;
      z-index:2;
    }
    .serviceTab.is-entering.from-open{
      animation: servicePanelInOpen .52s var(--service-ease) both;
    }
    .serviceTab.is-entering.from-next{
      animation: servicePanelInNext .52s var(--service-ease) both;
    }
    .serviceTab.is-entering.from-prev{
      animation: servicePanelInPrev .52s var(--service-ease) both;
    }
    .serviceTab.is-closing{
      animation: servicePanelClose .18s var(--service-ease) both;
      pointer-events:none;
    }
    .servicesTabs.is-collapsing .serviceTab{
      animation: serviceGridBack .24s var(--service-ease) both;
    }
    .serviceNav{
      width:var(--service-arrow-size);
      height:var(--service-arrow-size);
      padding:0;
      border-radius:999px;
      position:absolute;
      display:flex;
      align-items:center;
      justify-content:center;
      top:var(--service-arrow-top);
      transform: translateY(-50%);
      z-index:4;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.92));
      border:1px solid rgba(129,216,208,.7);
      box-shadow: 0 14px 30px rgba(17,12,46,.12), 0 0 0 6px rgba(129,216,208,.12);
      backdrop-filter: blur(8px);
      color:var(--ink);
      font-weight:950;
      font-size:20px;
      line-height:1;
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      transition: transform .32s var(--service-ease), opacity .24s var(--service-ease), box-shadow .32s var(--service-ease), border-color .32s var(--service-ease);
      will-change: transform, opacity;
    }
    .serviceNavPrev{ left: calc(-1 * (var(--service-arrow-size) + var(--service-arrow-gap))); }
    .serviceNavNext{ right: calc(-1 * (var(--service-arrow-size) + var(--service-arrow-gap))); }
    .servicesTabs.has-active .serviceNav.is-visible{
      opacity:1;
      pointer-events:auto;
      transform: translateY(-50%) scale(1);
    }
    .serviceNav:hover{
      transform: translateY(-50%) scale(1.08);
      box-shadow: 0 16px 34px rgba(17,12,46,.18), 0 0 0 8px rgba(129,216,208,.16);
      border-color: rgba(129,216,208,.85);
    }
    .serviceNav:active{
      transform: translateY(-50%) scale(1.02);
    }
    .serviceNav:disabled{
      opacity:0;
      pointer-events:none;
      transform: translateY(-50%) scale(.9);
    }
    html.dark .serviceNav{
      background: rgba(11,11,16,.95);
      border-color: rgba(129,216,208,.42);
      box-shadow: 0 14px 30px rgba(0,0,0,.38), 0 0 0 6px rgba(129,216,208,.08);
    }
    .serviceTab .cardTitle{
      margin-top:6px;
      transition: color .28s var(--service-ease), text-shadow .28s var(--service-ease);
    }
    .serviceTab:not(.is-active):hover .cardTitle{
      color: var(--ink);
      text-shadow: 0 6px 16px rgba(129,216,208,.22);
    }
    .serviceTab .cardText{
      max-height:120px;
      opacity:1;
      overflow:hidden;
      transition: opacity .28s var(--service-ease), max-height .34s var(--service-ease), margin-top .28s var(--service-ease), transform .32s var(--service-ease), filter .28s var(--service-ease);
    }
    .serviceTab.is-active .cardText{
      opacity:0;
      max-height:0;
      margin-top:0;
      transform: translateY(-6px);
      filter: blur(2px);
    }
    .serviceExpand{
      margin-top:0;
      display:grid;
      grid-template-rows: 0fr;
      opacity:0;
      overflow:hidden;
      transition: grid-template-rows .5s var(--service-ease), opacity .34s var(--service-ease), margin-top .34s var(--service-ease);
      will-change: grid-template-rows, opacity;
    }
    .serviceExpand > *{
      min-height:0;
      overflow:hidden;
      opacity:0;
      transform: translateY(8px);
      transition: opacity .3s var(--service-ease), transform .32s var(--service-ease);
    }
    .serviceTab.is-active .serviceExpand{
      margin-top:12px;
      opacity:1;
      grid-template-rows: 1fr;
    }
    .serviceTab.is-active .serviceExpand > *{
      opacity:1;
      transform: translateY(0);
    }
    .serviceExpandText{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .serviceExpandList{
      margin:0;
      padding:2px 0 0;
      list-style:none;
      display:grid;
      gap:9px;
      color:var(--muted);
      font-size:13.5px;
      line-height:1.58;
      overflow: visible;
    }
    .serviceExpandList li{
      position:relative;
      padding:10px 12px 10px 22px;
      border-radius:12px;
      border:1px solid rgba(166,173,186,.2);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        rgba(241,243,248,.22);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(17,12,46,.06);
      opacity:0;
      transform: translateY(8px);
      transition: opacity .3s var(--service-ease), transform .32s var(--service-ease), border-color .24s ease, background .24s ease, box-shadow .24s ease;
      text-wrap: pretty;
    }
    html.dark .serviceExpandList li{
      border-color: rgba(177,189,208,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
        rgba(10,13,20,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 22px rgba(0,0,0,.18);
    }
    .serviceTab.is-active .serviceExpandList li:hover{
      border-color: rgba(129,216,208,.22);
      background:
        linear-gradient(180deg, rgba(129,216,208,.06), rgba(129,216,208,.01)),
        rgba(241,243,248,.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 12px 22px rgba(17,12,46,.08);
    }
    html.dark .serviceTab.is-active .serviceExpandList li:hover{
      border-color: rgba(129,216,208,.24);
      background:
        linear-gradient(180deg, rgba(129,216,208,.045), rgba(129,216,208,.008)),
        rgba(10,13,20,.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 24px rgba(0,0,0,.24);
    }
    .serviceTab.is-active .serviceExpandList li{
      opacity:1;
      transform: translateY(0);
    }
    .serviceTab.is-active .serviceExpandList li:nth-child(1){ transition-delay: .04s; }
    .serviceTab.is-active .serviceExpandList li:nth-child(2){ transition-delay: .08s; }
    .serviceTab.is-active .serviceExpandList li:nth-child(3){ transition-delay: .12s; }
    .serviceTab.is-active .serviceExpandList li:nth-child(4){ transition-delay: .16s; }
    .serviceTab.is-active .serviceExpandList li:nth-child(5){ transition-delay: .20s; }
    .servicesTabs:not(.has-active) .serviceTab .cardText,
    .servicesTabs:not(.has-active) .serviceExpand,
    .servicesTabs:not(.has-active) .serviceExpand > *,
    .servicesTabs:not(.has-active) .serviceExpandList li{
      transition:none;
    }
    .serviceExpandList li::before{
      content:"-";
      position:absolute;
      left:10px;
      top:10px;
      transform:none;
      width:auto;
      height:auto;
      border-radius:0;
      background:none;
      box-shadow:none;
      color:var(--muted);
      font-weight:900;
      line-height:1;
    }
    .serviceExpandList li::after{
      content:"";
      position:absolute;
      left:-1px;
      top:8px;
      bottom:8px;
      width:2px;
      border-radius:999px;
      background: linear-gradient(180deg, rgba(176,186,203,.12), rgba(176,186,203,.42), rgba(176,186,203,.12));
      opacity:.92;
      pointer-events:none;
    }
    html.dark .serviceExpandList li::after{
      background: linear-gradient(180deg, rgba(129,216,208,.10), rgba(129,216,208,.34), rgba(129,216,208,.10));
      opacity:.8;
    }
    @media (max-width: 900px){
      .servicesTabsList{ grid-template-columns: 1fr; }
      .servicesTabs.has-active .servicesTabsList{ grid-template-columns: 1fr; }
      .serviceNav{ display:none; }
    }
    .serviceCard{ position:relative; padding-right:148px; }
    .serviceCardParallax{
      padding-right:18px;
      min-height:172px;
      overflow:visible;
      isolation:isolate;
    }
    .serviceCardParallax > :not(.serviceMedia){
      position:relative;
      z-index:2;
      max-width:58%;
    }
    .serviceTab.is-active.serviceCardParallax > :not(.serviceMedia){
      max-width:64%;
    }
    .serviceTab.is-active .serviceExpandList{
      font-size:14px;
      line-height:1.6;
    }
    .serviceCardParallax::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(250,250,252,.98) 0%, rgba(250,250,252,.9) 56%, rgba(250,250,252,0) 86%);
      pointer-events:none;
      z-index:1;
    }
    html.dark .serviceCardParallax::before{
      background: linear-gradient(90deg, rgba(11,11,16,.98) 0%, rgba(11,11,16,.86) 56%, rgba(11,11,16,0) 86%);
    }
    .serviceMedia{
      position:absolute;
      top:12px;
      right:12px;
      width:116px;
      height:116px;
      border-radius:18px;
      border:1px solid var(--line);
      background-image: none;
      background-size:cover;
      background-position:center;
      overflow:hidden;
      filter: grayscale(1) contrast(1.1);
      opacity:.82;
      box-shadow: 0 10px 30px rgba(17,12,46,.12);
      transition: transform .4s var(--service-ease, ease), right .4s var(--service-ease, ease), bottom .4s var(--service-ease, ease), top .4s var(--service-ease, ease), width .4s var(--service-ease, ease), height .4s var(--service-ease, ease), opacity .3s var(--service-ease, ease);
    }
    .serviceMedia::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(135deg, rgba(250,250,252,.35), rgba(250,250,252,0) 60%);
      pointer-events:none;
    }
    html.dark .serviceMedia{
      filter: grayscale(1) contrast(1.15) brightness(.9);
      opacity:.7;
    }
    html.dark .serviceMedia::after{
      background: linear-gradient(135deg, rgba(11,11,16,.45), rgba(11,11,16,0) 60%);
    }
    .serviceMedia.shoot{
      background: none;
      border:0;
      box-shadow:none;
      background-color: transparent;
      filter:none;
      overflow: visible;
      opacity:1;
      width:240px;
      height:240px;
      right:-40px;
      bottom:-34px;
      top:auto;
      pointer-events:none;
      --media-x: 0;
      --media-y: 0;
      transform: translate3d(calc(var(--media-x) * 1px), calc(var(--media-y) * 1px), 0);
      backface-visibility: hidden;
      will-change: transform, opacity;
      animation: serviceReveal .9s ease-out .12s both;
    }
    .serviceMedia.shoot::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: url("../images/Camera-osmi.png");
      background-size: contain;
      aspect-ratio: 3 / 2;
      background-repeat: no-repeat;
      background-position: center;
      transform-origin: 50% 60%;
      animation: serviceFloat 9s ease-in-out .6s infinite;
      filter: drop-shadow(0 18px 36px rgba(17,12,46,.16));
      mix-blend-mode:multiply;
    }
    .serviceMedia.edit{
      background: none;
      border:0;
      box-shadow:none;
      background-color: transparent;
      filter:none;
      overflow: visible;
      opacity:1;
      width:210px;
      height:210px;
      right:-28px;
      bottom:-26px;
      top:auto;
      pointer-events:none;
      --media-x: 0;
      --media-y: 0;
      transform: translate3d(calc(var(--media-x) * 1px), calc(var(--media-y) * 1px), 0);
      backface-visibility: hidden;
      will-change: transform, opacity;
      animation: serviceReveal .9s ease-out .12s both;
    }
    .serviceMedia.edit::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: url("../images/Wheel-montage.png");
      background-size: contain;
      aspect-ratio: 3 / 2;
      background-repeat: no-repeat;
      background-position: center;
      transform-origin: 50% 60%;
      animation: serviceFloat 9s ease-in-out .6s infinite;
      filter: drop-shadow(0 18px 36px rgba(17,12,46,.16));
      mix-blend-mode:multiply;
    }
    .serviceMedia.post{
      background: none;
      border:0;
      box-shadow:none;
      background-color: transparent;
      filter:none;
      overflow: visible;
      opacity:1;
      width:220px;
      height:220px;
      right:-32px;
      bottom:-28px;
      top:auto;
      pointer-events:none;
      --media-x: 0;
      --media-y: 0;
      transform: translate3d(calc(var(--media-x) * 1px), calc(var(--media-y) * 1px), 0);
      backface-visibility: hidden;
      will-change: transform, opacity;
      animation: serviceReveal .9s ease-out .12s both;
    }
    .serviceMedia.post::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: url("../images/Xlop-osmi.png");
      background-size: contain;
      aspect-ratio: 3 / 2;
      background-repeat: no-repeat;
      background-position: center;
      transform-origin: 50% 60%;
      animation: serviceFloat 9s ease-in-out .6s infinite;
      filter: drop-shadow(0 18px 36px rgba(17,12,46,.16));
      mix-blend-mode:multiply;
    }
    .serviceMedia.shoot::after{ display:none; }
    .serviceMedia.edit::after{ display:none; }
    html.dark .serviceMedia.shoot{ opacity:1; }
    html.dark .serviceMedia.shoot::before{
      opacity:.9;
      mix-blend-mode:screen;
      filter: drop-shadow(0 22px 42px rgba(0,0,0,.4));
    }
    html.dark .serviceMedia.edit{ opacity:1; }
    html.dark .serviceMedia.edit::before{
      opacity:.9;
      mix-blend-mode:screen;
      filter: drop-shadow(0 22px 42px rgba(0,0,0,.4));
    }
    .serviceMedia.post::after{ display:none; }
    html.dark .serviceMedia.post{ opacity:1; }
    html.dark .serviceMedia.post::before{
      opacity:.9;
      mix-blend-mode:screen;
      filter: drop-shadow(0 22px 42px rgba(0,0,0,.4));
    }

    @keyframes serviceReveal{
      0%{ opacity:0; }
      100%{ opacity:1; }
    }
    @keyframes servicePanelInOpen{
      0%{ opacity:.16; transform: translate3d(0,14px,0) scale(.988); filter: blur(5px); }
      100%{ opacity:1; transform: translate3d(0,-2px,0) scale(1); filter: blur(0); }
    }
    @keyframes servicePanelInNext{
      0%{ opacity:.16; transform: translate3d(24px,-2px,0) scale(.988); filter: blur(5px); }
      100%{ opacity:1; transform: translate3d(0,-2px,0) scale(1); filter: blur(0); }
    }
    @keyframes servicePanelInPrev{
      0%{ opacity:.16; transform: translate3d(-24px,-2px,0) scale(.988); filter: blur(5px); }
      100%{ opacity:1; transform: translate3d(0,-2px,0) scale(1); filter: blur(0); }
    }
    @keyframes servicePanelClose{
      0%{ opacity:1; transform: translate3d(0,-2px,0) scale(1); filter: blur(0); }
      100%{ opacity:.22; transform: translate3d(0,10px,0) scale(.988); filter: blur(4px); }
    }
    @keyframes serviceGridBack{
      0%{ opacity:.32; transform: translate3d(0,6px,0) scale(.996); }
      100%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
    }
    @keyframes serviceFloat{
      0%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-6px,0); }
      100%{ transform: translate3d(0,0,0); }
    }
    @media (prefers-reduced-motion: reduce){
      .serviceMedia.shoot{ animation: none; }
      .serviceMedia.shoot::before{ animation: none; }
      .serviceMedia.edit{ animation: none; }
      .serviceMedia.edit::before{ animation: none; }
      .serviceMedia.post{ animation: none; }
      .serviceMedia.post::before{ animation: none; }
      .serviceTab,
      .serviceExpand,
      .serviceTab .cardText,
      .serviceExpand > *{
        transition: none;
      }
      .serviceTab.is-entering,
      .serviceTab.is-closing,
      .servicesTabs.is-collapsing .serviceTab{
        animation: none;
      }
      .serviceNav{ transition:none; }
    }
    .serviceMedia.post::after{ display:none; }
    html.dark .serviceMedia.post{ filter:none; opacity:.95; }

    @media (max-width: 820px){
      .servicesGrid{ gap:16px; }
      .serviceCardParallax{
        --service-media-size: clamp(150px, 44vw, 220px);
        --service-media-overhang: clamp(60px, 26vw, 120px);
        --service-media-clear: calc(var(--service-media-size) - var(--service-media-overhang));
      }
      .serviceCard{ padding-right: calc(var(--service-media-clear) + 8px); }
      .serviceCardParallax{
        min-height: calc(var(--service-media-size) + 6px);
        padding-right: calc(var(--service-media-clear) + 8px);
      }
      .serviceCardParallax > :not(.serviceMedia){
        max-width: none;
      }
      .serviceCardParallax .cardTitle{ font-size:17px; }
      .serviceCardParallax .cardText{ font-size:14px; }
      .serviceCardParallax::before{
        background: linear-gradient(90deg, rgba(250,250,252,.98) 0%, rgba(250,250,252,.9) 62%, rgba(250,250,252,0) 92%);
      }
      html.dark .serviceCardParallax::before{
        background: linear-gradient(90deg, rgba(11,11,16,.98) 0%, rgba(11,11,16,.86) 62%, rgba(11,11,16,0) 92%);
      }
      .serviceCardParallax .serviceMedia{
        position:absolute;
        top:50%;
        right:calc(-1 * var(--service-media-overhang));
        bottom:auto;
        margin:0;
        width:var(--service-media-size);
        height:var(--service-media-size);
      }
      .serviceMedia.shoot,
      .serviceMedia.edit,
      .serviceMedia.post{
        width:var(--service-media-size);
        height:var(--service-media-size);
        right:calc(-1 * var(--service-media-overhang));
        bottom:auto;
        transform: translate3d(0,-50%,0);
      }
      .serviceMedia.shoot::before,
      .serviceMedia.edit::before,
      .serviceMedia.post::before{
        mix-blend-mode:normal;
        filter: drop-shadow(0 12px 22px rgba(17,12,46,.16));
        animation: none;
      }
      html.dark .serviceMedia.shoot::before,
      html.dark .serviceMedia.edit::before,
      html.dark .serviceMedia.post::before{
        mix-blend-mode:normal;
        filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
      }
    }
    @media (max-width: 600px){
      .servicesTabs{
        --service-media-active-mobile: clamp(132px, 39vw, 162px);
        margin-top:14px;
      }
      .servicesTabsList{ gap:8px; }
      .serviceCard{ padding-right:0; }
      .serviceCardParallax{
        --service-media-size: clamp(132px, 39vw, 162px);
        display:block;
        min-height: calc(var(--service-media-size) + 6px);
        padding:11px calc(var(--service-media-size) + 8px) 11px 12px;
        overflow:hidden;
      }
      .serviceCardShoot.serviceCardParallax{ overflow:visible; }
      .serviceCardParallax > :not(.serviceMedia){ max-width:none; }
      .serviceCardParallax .cardTitle{
        margin-top:0;
        font-size:16px;
        line-height:1.06;
        letter-spacing:-0.02em;
        text-wrap:balance;
        color:rgba(12,20,34,.92);
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
      }
      .serviceCardParallax .cardText{
        margin-top:6px;
        font-size:13px;
        line-height:1.36;
        font-weight:700;
        color:rgba(44,58,76,.86);
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        text-wrap:pretty;
      }
      html.dark .serviceCardParallax .cardTitle{
        color:rgba(246,249,253,.98);
      }
      html.dark .serviceCardParallax .cardText{
        color:rgba(224,233,243,.96);
      }
      .serviceCardParallax .serviceMedia{
        position:absolute;
        top:50%;
        right:4px;
        bottom:auto;
        margin:0;
        width:var(--service-media-size);
        height:var(--service-media-size);
        transform:translateY(-50%);
      }
      .serviceMedia.shoot,
      .serviceMedia.edit,
      .serviceMedia.post{
        width:var(--service-media-size);
        height:var(--service-media-size);
        right:4px;
        bottom:auto;
        transform:translateY(-50%);
      }
      .serviceCardShoot .serviceMedia.shoot{ right:-6px; }
      .serviceMedia.shoot::before,
      .serviceMedia.edit::before,
      .serviceMedia.post::before{
        mix-blend-mode:normal;
        transform: translateY(19px) scale(1.22);
        transform-origin:50% 50%;
        background-position:center center;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        filter: drop-shadow(0 5px 10px rgba(17,12,46,.14));
        animation: none;
      }
      .serviceMedia.shoot::before{
        transform: translateY(19px) scale(1.12);
      }
      html.dark .serviceMedia.shoot::before,
      html.dark .serviceMedia.edit::before,
      html.dark .serviceMedia.post::before{
        mix-blend-mode:normal;
        filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
      }
      .serviceTab:not(.serviceCardParallax){ padding:14px; }
      .serviceTab.is-active .serviceExpand{
        margin-top:6px;
        overflow:auto;
      }
      .serviceExpand{
        grid-column: 1 / -1;
      }
      .serviceTab.is-active .cardText{
        opacity:1;
        max-height:116px;
        margin-top:6px;
      }
      .serviceExpand{ display:none; }
      .serviceExpandList{
        font-size:11.6px;
        line-height:1.42;
        gap:6px;
        padding-right:6px;
        padding-left:0;
      }
      .serviceExpandList li{
        padding:7px 8px 7px 14px;
        border-radius:10px;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.08),
          0 4px 12px rgba(17,12,46,.05);
      }
      .serviceExpandList li::before{
        width:auto;
        height:auto;
        box-shadow:none;
        left:6px;
        top:7px;
        font-weight:700;
      }
      .serviceExpandList li::after{
        left:-1px;
        top:6px;
        bottom:6px;
        width:2px;
      }
      .heroInner{ padding:26px 12px 28px; }
      .heroGrid{ margin-top:18px; gap:12px; }
      .heroGrid > div:first-child{ margin-top:24px !important; }
      .heroInner h1{ margin-top:10px; }
      .heroLead{ margin-top:10px; }
      .heroGrid > div:first-child > div{ margin-top:12px !important; }
      #services{ padding-bottom:8px; }
      #process{ padding-top:24px; }
    }
    @media (min-width: 601px){
      .serviceTab.is-active .serviceMedia{
        top:auto;
        right:12px;
        bottom:16px;
        width: clamp(205px, 24.2vw, 279px);
        height: clamp(205px, 24.2vw, 279px);
        transform: translate3d(calc(var(--media-x) * 1px), calc(var(--media-y) * 1px), 0);
      }
      .serviceTab.is-active .serviceMedia.shoot{
        top:calc(50% + 45px);
        bottom:auto;
        right:8px;
        transform: translate3d(0, -50%, 0);
        --media-x: 0;
        --media-y: 0;
      }
      .serviceTab.is-active .serviceMedia.edit,
      .serviceTab.is-active .serviceMedia.post{
        top:calc(50% + 55px);
        bottom:auto;
        right:6px;
        width: clamp(242px, 27vw, 326px);
        height: clamp(242px, 27vw, 326px);
        transform: translate3d(0, -50%, 0) scale(1);
        --media-x: 0;
        --media-y: 0;
      }
      .serviceTab.is-active .serviceMedia.edit{
        top:calc(50% + 55px);
      }
    }
    @media (min-width: 1180px){
      .serviceTab.is-active.serviceCardParallax > :not(.serviceMedia){
        max-width:66%;
      }
      .serviceTab.is-active .serviceExpandList{
        font-size:14.5px;
        line-height:1.62;
      }
    }
    @media (min-width: 601px){
      .servicesTabs:not(.has-active) .serviceCardParallax{
        overflow:hidden;
      }
      .servicesTabs:not(.has-active) .serviceCardParallax > :not(.serviceMedia){
        max-width:62%;
      }
      .servicesTabs:not(.has-active) .serviceMedia{
        top:0;
        bottom:auto;
        right:0;
        --media-x: 0;
        --media-y: 0;
        transform: translate3d(0, 0, 0);
        transition: opacity .24s var(--service-ease);
      }
      .servicesTabs:not(.has-active) .serviceMedia.shoot{
        right:0;
      }
      .servicesTabs:not(.has-active) .serviceMedia.edit{
        right:0;
        top:50%;
        transform: translate3d(0, -35%, 0);
      }
      .servicesTabs:not(.has-active) .serviceMedia.edit::before{
        content:"";
        background-size:110% auto;
        background-position:17% center;
      }
      .servicesTabs:not(.has-active) .serviceMedia.post{
        top:50%;
        transform: translate3d(25px, -35%, 0);
      }
    }
    @media (max-width: 600px){
      .serviceTab.is-active .serviceMedia{
        width: var(--service-media-active-mobile);
        height: var(--service-media-active-mobile);
        transform: translateY(-50%) scale(1);
      }
    }
    @media (prefers-reduced-motion: reduce){
      .brandIntroB2gRail{
        animation:none !important;
        opacity:.8;
        filter:none;
      }
      .brandIntroB2gRail:hover,
      .brandIntroB2gRail:focus-visible{
        opacity:1;
      }
    }

    .kpiBig{ font-weight:950; letter-spacing:-0.02em; font-size:18px; }
    .kpiSmall{ margin-top:4px; color:var(--muted2); font-size:12px; }

    .h2{ font-size:28px; font-weight:950; letter-spacing:-0.03em; margin:0; }
    .aboutHeadline{
      font-size: clamp(31px, 4.3vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.035em;
    }
    .aboutHeadline .aboutWord{
      display:inline-block;
      opacity:0;
      filter: blur(14px);
      transform: translate3d(0, 18px, 0) scale(.97);
      will-change: transform, filter, opacity;
    }
    .aboutHeadline.underline::after{
      width: 96px;
      height: 3px;
      bottom: -12px;
      background: linear-gradient(90deg, rgba(129,216,208,.95), rgba(138,234,184,.65), rgba(129,216,208,.18));
      transform-origin:left center;
      transform: scaleX(0);
      opacity:0;
    }
    .aboutHeadlineAccent{
      background: linear-gradient(110deg, #74f7e6 0%, #7ee0ff 45%, #b5f8d6 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 16px rgba(129,216,208,.24);
    }
    html:not(.dark) .aboutHeadlineAccent{
      background: none;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      color: var(--accent);
      -webkit-text-fill-color: currentColor;
      text-shadow: 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(12,32,48,.14);
    }
    #about .sub{
      opacity:0;
      filter: blur(11px);
      transform: translate3d(0, 18px, 0);
      will-change: transform, filter, opacity;
    }
    #about .aboutGrid .card{
      opacity:0;
      filter: blur(10px);
      transform: translate3d(0, 24px, 0) scale(.985);
      will-change: transform, filter, opacity;
    }
    #about.in .aboutHeadline .aboutWord:nth-child(1){ animation: aboutWordIn .66s cubic-bezier(.14,.86,.18,1) .04s forwards; }
    #about.in .aboutHeadline .aboutWord:nth-child(2){ animation: aboutWordIn .66s cubic-bezier(.14,.86,.18,1) .14s forwards; }
    #about.in .aboutHeadline .aboutWord:nth-child(3){ animation: aboutWordIn .66s cubic-bezier(.14,.86,.18,1) .24s forwards; }
    #about.in .aboutHeadline.underline::after{ animation: aboutUnderlineIn .44s cubic-bezier(.18,.82,.2,1) .38s forwards; }
    #about.in .sub{ animation: aboutTextIn .68s cubic-bezier(.2,.84,.2,1) .34s forwards; }
    #about.in .aboutGrid .card:nth-child(1){ animation: aboutCardIn .56s cubic-bezier(.18,.82,.24,1) .42s forwards; }
    #about.in .aboutGrid .card:nth-child(2){ animation: aboutCardIn .56s cubic-bezier(.18,.82,.24,1) .50s forwards; }
    #about.in .aboutGrid .card:nth-child(3){ animation: aboutCardIn .56s cubic-bezier(.18,.82,.24,1) .58s forwards; }
    #about.in .aboutGrid .card:nth-child(4){ animation: aboutCardIn .56s cubic-bezier(.18,.82,.24,1) .66s forwards; }
    @keyframes aboutWordIn{
      0%{ opacity:0; filter: blur(14px); transform: translate3d(0, 18px, 0) scale(.97); }
      65%{ opacity:1; filter: blur(0); transform: translate3d(0, -2px, 0) scale(1.01); }
      100%{ opacity:1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
    }
    @keyframes aboutUnderlineIn{
      0%{ opacity:0; transform: scaleX(0); }
      100%{ opacity:.95; transform: scaleX(1); }
    }
    @keyframes aboutTextIn{
      0%{ opacity:0; filter: blur(11px); transform: translate3d(0, 18px, 0); }
      100%{ opacity:1; filter: blur(0); transform: translate3d(0, 0, 0); }
    }
    @keyframes aboutCardIn{
      0%{ opacity:0; filter: blur(10px); transform: translate3d(0, 24px, 0) scale(.985); }
      100%{ opacity:1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
    }
    .sub{ margin-top:12px; color:var(--muted); line-height:1.7; }

    .underline{ position:relative; display:inline-block; }
    .underline::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-10px;
      width:48px;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(129,216,208,.92), rgba(129,216,208,.28));
      opacity:.95;
    }

    .grid3{ display:grid; gap:14px; grid-template-columns: repeat(1, minmax(0,1fr)); margin-top:18px; }
    .aboutGrid{ gap:16px; }
    .servicesGrid{ gap:24px; }
    .processFlow{
      position:relative;
      padding-top:28px;
      --process-line-y: 14px;
      --process-line-thin: 1.15;
      --process-line-thick: 3.6;
      --process-card-lift: -12px;
      --process-dot: 12px;
      --process-dot-active: 18px;
      --process-bump: 8px;
      --process-line-extend: 70px;
      --process-line-offset: 2px;
      --process-glow-span: 880px;
      --process-glow-edge: 36px;
      --process-active-alpha: 0;
      --process-glow-alpha: 0;
    }
    .processLine{ display:none; }
    .processFlowFlash{
      position:absolute;
      inset:-4px -8px -10px -8px;
      z-index:0;
      pointer-events:none;
    }
    .processFlow .processCard{
      position:relative;
      z-index:2;
      --process-dot-scale: 1;
      --process-dot-shift: 0px;
      --process-card-shift: 0px;
    }
    @media (min-width: 820px){
      .processFlow::before,
      .processFlow::after{
        display:none;
      }
      .processLine{
        position:absolute;
        inset:0;
        display:block;
        width:100%;
        height:100%;
        pointer-events:none;
        z-index:1;
      }
      .processLine path{
        fill:none;
        stroke-linecap:round;
        transition: none;
      }
      .processLineBase{
        stroke: rgba(129,216,208,.52);
        stroke-width:var(--process-line-thin);
        opacity:.92;
      }
      .processLineBaseCore{
        stroke: url(#processBaseWeightGradient);
        stroke-width:var(--process-line-thick);
        opacity:.95;
        filter: blur(.15px);
      }
      .processLineGlow{
        stroke: url(#processGlowGradient);
        stroke-width:8;
        opacity: var(--process-glow-alpha);
        filter: blur(5px);
      }
      .processLineActive{
        stroke: url(#processGlowGradient);
        stroke-width:2.6;
        opacity: var(--process-active-alpha);
        transition: none;
        filter: none;
      }
      .processFlow .processCard::after{
        content:"";
        position:absolute;
        top:-20px;
        left:50%;
        width:var(--process-dot);
        height:var(--process-dot);
        border-radius:999px;
        border:2px solid rgba(129,216,208,.5);
        background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
        transform: translateX(-50%) translateY(var(--process-dot-shift)) scale(var(--process-dot-scale));
        transform-origin:center;
        box-shadow: 0 0 0 4px rgba(129,216,208,.08);
        transition: border-color .45s ease, box-shadow .45s ease, transform .5s cubic-bezier(.22,.72,.2,1);
        z-index:4;
      }
      .processFlow .processCard::before{
        content:"";
        position:absolute;
        inset:-2px;
        border-radius:22px;
        background:
          radial-gradient(220px 120px at 20% 15%, rgba(129,216,208,.35), transparent 65%),
          radial-gradient(260px 140px at 90% 0%, rgba(129,216,208,.28), transparent 70%);
        opacity:0;
        filter: blur(2px);
        transition: opacity .5s ease;
        pointer-events:none;
        z-index:0;
      }
      .processFlow .processCard.is-active::after{
        border-color: rgba(129,216,208,.9);
        box-shadow: 0 0 0 8px rgba(129,216,208,.2), 0 0 42px rgba(129,216,208,.7);
        background: var(--paperGlass2);
      }
      .processFlow .processCard.is-active{
        --process-dot-scale: 1.7;
        --process-dot-shift: -2px;
      }
      .processFlow .processCard.is-active::before{
        opacity:1;
      }

      html.dark .processLineBase{
        stroke: rgba(129,216,208,.62);
        opacity:.9;
      }
      html.dark .processLineBaseCore{
        opacity:.98;
      }
      html.dark .processLineGlow{
        filter: blur(5.5px);
      }
      html.dark .processLineActive{
        filter: none;
      }
      html.dark .processFlow .processCard::after{
        background: var(--ink);
        border-color: rgba(129,216,208,.55);
        box-shadow: 0 0 0 4px rgba(129,216,208,.12);
      }
      html.dark .processFlow .processCard::before{
        background:
          radial-gradient(220px 120px at 20% 15%, rgba(129,216,208,.32), transparent 65%),
          radial-gradient(260px 140px at 90% 0%, rgba(129,216,208,.22), transparent 70%);
      }
      html.dark .processFlow .processCard.is-active::after{
        border-color: rgba(129,216,208,.95);
        box-shadow: 0 0 0 8px rgba(129,216,208,.28), 0 0 46px rgba(129,216,208,.8);
      }

      .processFlow .processCard{
        transform: translateY(var(--process-card-shift));
        transition: transform .5s cubic-bezier(.22,.72,.2,1), box-shadow .45s ease, border-color .45s ease;
      }
      .processFlow .processCard:hover{
        --process-card-shift: var(--process-card-lift);
      }
      .processFlow .processCard.is-active{
        --process-card-shift: var(--process-card-lift);
        border-color: rgba(129,216,208,.35);
        box-shadow: 0 18px 55px rgba(17,12,46,.16), 0 0 0 1px rgba(129,216,208,.12);
      }
      html.dark .processFlow .processCard.is-active{
        border-color: rgba(129,216,208,.4);
        box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 0 1px rgba(129,216,208,.18);
      }
    }

    .portfolioTop{ display:flex; gap:12px; align-items:end; justify-content:space-between; flex-wrap:wrap; }
    .portfolioFacts{
      margin-top:0;
      display:grid;
      gap:10px;
      padding-top:12px;
      justify-items:center;
      position:relative;
    }
    .portfolioFacts::before{
      content:"";
      position:absolute;
      top:0;
      left:50%;
      transform: translateX(-50%);
      width:min(620px, 82%);
      height:3px;
      border-radius:999px;
      background: linear-gradient(
        90deg,
        rgba(160,166,178,.08) 0%,
        rgba(170,176,188,.34) 18%,
        rgba(182,187,199,.48) 52%,
        rgba(170,176,188,.32) 82%,
        rgba(160,166,178,.08) 100%
      );
      filter: blur(.2px);
      opacity:.92;
      pointer-events:none;
    }
    .factsToggle{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:max-content;
      max-width:100%;
      border:0;
      background:transparent;
      padding:2px 18px;
      color:var(--muted2);
      opacity:.78;
      font-weight:700;
      font-size:13px;
      letter-spacing:.02em;
      line-height:1.45;
      text-align:center;
      cursor:pointer;
      transition: opacity .22s ease, color .22s ease, transform .22s ease;
    }
    .factsToggle::before{
      content:none;
    }
    .factsToggle::after{
      content:"";
      position:absolute;
      right:4px;
      top:50%;
      width:7px;
      height:7px;
      border-right:1.5px solid rgba(175,181,194,.74);
      border-bottom:1.5px solid rgba(175,181,194,.74);
      transform: translateY(-62%) rotate(45deg);
      transition: transform .22s ease, border-color .22s ease;
    }
    .factsToggle:hover{
      opacity:.98;
      color:var(--muted);
      transform: translateY(1px);
    }
    .factsToggle.is-open{
      opacity:1;
      color:var(--ink);
    }
    .factsToggle.is-open::after{
      border-color: rgba(196,201,211,.92);
      transform: translateY(-40%) rotate(-135deg);
    }
    .portfolioFactsPanel{
      margin-top:2px;
      display:grid;
      grid-template-rows:0fr;
      opacity:0;
      transition: grid-template-rows .34s cubic-bezier(.22,.74,.25,1), opacity .22s ease;
    }
    .portfolioFactsPanelInner{
      min-height:0;
      overflow:hidden;
    }
    .portfolioFactsPanel.is-open .portfolioFactsPanelInner{
      overflow:visible;
    }
    .portfolioFactsPanel.is-open{
      grid-template-rows:1fr;
      opacity:1;
    }
    .factsGrid{
      display:grid;
      gap:12px;
      grid-template-columns:1fr;
    }
    @media (max-width: 820px){
      #portfolioFactsSection{ padding-top:14px; }
      #services{ padding-top:20px; }
      .factsToggle{
        width:max-content;
        max-width:100%;
        padding:2px 18px;
      }
    }
    .factCard{
      border-radius:18px;
      padding:14px;
      border:1px solid rgba(166,173,186,.30);
      background:
        linear-gradient(180deg, rgba(193,199,210,.04), rgba(193,199,210,.01)),
        var(--paperGlass2);
      box-shadow:
        0 14px 34px rgba(8,10,16,.20),
        inset 0 1px 0 rgba(200,206,216,.10);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .factCard.is-link-opening{
      transform: translateY(-2px) scale(1.01);
      border-color: rgba(129,216,208,.62);
      box-shadow:
        0 18px 34px rgba(8,10,16,.24),
        0 0 0 3px rgba(129,216,208,.14),
        inset 0 1px 0 rgba(212,233,241,.22);
      background:
        linear-gradient(180deg, rgba(129,216,208,.07), rgba(129,216,208,.01)),
        var(--paperGlass2);
    }
    .factHead{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .factAvatarSlot{
      width:42px;
      height:42px;
      border-radius:999px;
      border:1px dashed rgba(172,179,191,.52);
      background: radial-gradient(110% 110% at 26% 20%, rgba(178,184,196,.26), rgba(178,184,196,.08) 62%, rgba(178,184,196,.03));
      flex:0 0 42px;
      position:relative;
      overflow:hidden;
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease;
    }
    .factAvatarSlot::before{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:999px;
      border:1px solid rgba(182,189,201,.40);
      opacity:.9;
    }
    .factAvatarSlot::after{
      content:"";
      position:absolute;
      width:4px;
      height:4px;
      border-radius:999px;
      background: rgba(192,198,209,.76);
      right:8px;
      bottom:8px;
    }
    .factAvatarSlotZloy{
      border-style:solid;
      border-color: rgba(171,183,202,.56);
      background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/zloy-ava.jpg");
      background-size: cover;
      background-position: center;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        0 6px 16px rgba(5,8,14,.22);
    }
    .factAvatarSlotParade{
      border-style:solid;
      border-color: rgba(171,183,202,.56);
      background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/parade-ava.jpg");
      background-size: cover;
      background-position: center;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        0 6px 16px rgba(5,8,14,.22);
    }
    .factAvatarSlotGorila{
      border-style:solid;
      border-color: rgba(171,183,202,.56);
      background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/gorila-ava.jpg");
      background-size: cover;
      background-position: center;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        0 6px 16px rgba(5,8,14,.22);
    }
    .factAvatarSlotZloy::before{
      inset:2px;
      border-color: rgba(196,206,224,.5);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
      border-radius:999px;
    }
    .factAvatarSlotParade::before,
    .factAvatarSlotGorila::before{
      inset:2px;
      border-color: rgba(196,206,224,.5);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
      border-radius:999px;
    }
    .factCard:hover .factAvatarSlotZloy,
    .factCard:hover .factAvatarSlotParade,
    .factCard:hover .factAvatarSlotGorila{
      transform: translateY(-1px) scale(1.06);
      border-color: rgba(129,216,208,.72);
      box-shadow:
        inset 0 0 0 1px rgba(212,233,241,.3),
        0 10px 20px rgba(5,8,14,.28),
        0 0 0 4px rgba(129,216,208,.12);
      filter: saturate(1.07);
    }
    .factCard:hover .factAvatarSlotZloy::after,
    .factCard:hover .factAvatarSlotParade::after,
    .factCard:hover .factAvatarSlotGorila::after{
      background: rgba(129,216,208,.95);
      box-shadow: 0 0 8px rgba(129,216,208,.55);
    }
    .factCard.is-link-opening .factAvatarSlotZloy,
    .factCard.is-link-opening .factAvatarSlotParade,
    .factCard.is-link-opening .factAvatarSlotGorila{
      transform: translateY(-1px) scale(1.06);
      border-color: rgba(129,216,208,.76);
      box-shadow:
        inset 0 0 0 1px rgba(212,233,241,.32),
        0 10px 20px rgba(5,8,14,.3),
        0 0 0 4px rgba(129,216,208,.14);
      filter: saturate(1.08);
    }
    .factCard.is-link-opening .factAvatarSlotZloy::after,
    .factCard.is-link-opening .factAvatarSlotParade::after,
    .factCard.is-link-opening .factAvatarSlotGorila::after{
      background: rgba(129,216,208,.98);
      box-shadow: 0 0 8px rgba(129,216,208,.62);
    }
    @media (prefers-reduced-motion: reduce){
      .factCard,
      .factCard.is-link-opening{
        transform:none;
      }
    }
    .factLabel{
      color:var(--muted2);
      font-size:10.5px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .factWork{
      margin-top:10px;
      font-weight:800;
      font-size:14px;
      line-height:1.45;
      color:var(--ink);
    }
    .factWorkLink{
      cursor:pointer;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      text-decoration-color: rgba(164,174,190,.38);
      transition: color .22s ease, text-decoration-color .22s ease, transform .22s ease;
    }
    .factWorkLink:hover{
      color:var(--accent);
      text-decoration-color: rgba(129,216,208,.88);
      transform: translateX(1px);
    }
    .factWorkLink:focus-visible{
      outline: 1px solid rgba(129,216,208,.68);
      outline-offset: 3px;
      border-radius:8px;
    }
    .factText{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .filters{
      display:flex;
      gap:8px;
      overflow-x:auto;
      padding:6px 4px 12px;
      scrollbar-width:none;
      position:relative;
    }
    .filters::after{
      content:"";
      position:absolute;
      left:4px;
      right:4px;
      bottom:-10px;
      height:1px;
      background: var(--line);
      opacity:0;
      border-radius:999px;
      pointer-events:none;
    }
    .filters::-webkit-scrollbar{ height:0; }
    .chip{
      position:relative;
      border-radius:14px;
      padding:10px 14px 12px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      color:var(--muted);
      font-weight:800;
      font-size:13px;
      letter-spacing:.02em;
      cursor:pointer;
      flex:0 0 auto;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    }
    .chip::after{
      content:"";
      position:absolute;
      left:10px;
      right:10px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background: var(--accent);
      opacity:0;
      transform:scaleX(.4);
      transition: opacity .2s ease, transform .2s ease;
    }
    .chip:hover{ transform: translateY(-1px); box-shadow: 0 18px 55px rgba(17,12,46,.10); color:var(--ink); }
    .chip:hover::after{ opacity:.5; transform:scaleX(1); }
    .chipActive{
      background: var(--ink);
      color: var(--paper) !important;
      border-color: rgba(129,216,208,.6);
      box-shadow: 0 10px 28px rgba(129,216,208,.25), 0 0 0 1px rgba(129,216,208,.25);
      -webkit-text-fill-color: currentColor;
    }
    .chipActive::after{ opacity:1; transform:scaleX(1); }
    html.dark .chipActive{
      background: #F4F5FA;
      color: #0B0B10 !important;
      border-color: rgba(129,216,208,.6);
      box-shadow: 0 10px 28px rgba(129,216,208,.25), 0 0 0 1px rgba(129,216,208,.2);
    }

    #clientsStrip{
      padding-top:22px;
    }
    .clientsStripWrap{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(170,179,194,.26);
      background:
        radial-gradient(980px 360px at 50% -10%, rgba(129,216,208,.08), transparent 72%),
        radial-gradient(920px 420px at 50% 110%, rgba(129,216,208,.08), transparent 76%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
      box-shadow:
        0 18px 56px rgba(9,12,20,.24),
        inset 0 1px 0 rgba(255,255,255,.08);
      padding:28px 0 24px;
      isolation:isolate;
    }
    .clientsStripWrap::before{
      content:"";
      position:absolute;
      inset:-10% -8%;
      pointer-events:none;
      background:
        radial-gradient(42% 44% at 22% 74%, rgba(129,216,208,.07), transparent 74%),
        radial-gradient(46% 42% at 78% 26%, rgba(129,216,208,.06), transparent 76%);
      filter: blur(26px);
      opacity:.9;
      z-index:0;
    }
    .clientsStripHead{
      position:relative;
      z-index:1;
      text-align:center;
      padding:0 clamp(14px, 3vw, 26px);
    }
    .clientsStripTitle{
      margin:0;
      font-weight:950;
      letter-spacing:-.03em;
      line-height:.98;
      font-size: clamp(30px, 4.2vw, 52px);
      text-transform:uppercase;
      color:rgba(246,249,252,.98);
      text-shadow: 0 8px 30px rgba(0,0,0,.22);
      text-wrap:balance;
    }
    .clientsStripSub{
      margin:12px auto 0;
      max-width:78ch;
      color:rgba(224,233,243,.84);
      font-size:clamp(14px, 1.35vw, 18px);
      line-height:1.55;
      text-wrap:balance;
    }
    .clientsStripRows{
      position:relative;
      z-index:1;
      margin-top:18px;
      display:grid;
      gap:14px;
    }
    .clientsStripLane{
      position:relative;
      overflow:hidden;
      padding:4px 0;
      touch-action: pan-y;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .clientsStripLane::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(129,216,208,.05), transparent 12%, transparent 88%, rgba(129,216,208,.05));
      opacity:.7;
    }
    .clientsStripTrack{
      display:flex;
      width:max-content;
      will-change:transform;
      animation: clientsStripLeft 30s linear infinite;
    }
    .clientsStripLane--reverse .clientsStripTrack{
      animation-name: clientsStripRight;
      animation-duration: 32s;
    }
    .clientsStripGroup{
      display:flex;
      align-items:center;
      gap:14px;
      padding-right:14px;
      flex:0 0 auto;
    }
    .clientBadge{
      width:max-content;
      min-width:0;
      max-width:min(42vw, 460px);
      flex:0 0 auto;
      height:94px;
      border-radius:20px;
      border:1px solid rgba(176,186,203,.24);
      background:
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.08), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 26px rgba(0,0,0,.18);
      padding:16px 18px;
      display:flex;
      align-items:center;
      gap:16px;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
      user-select:none;
    }
    .clientBadge:hover{
      transform: translateY(-1px);
      border-color: rgba(129,216,208,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 14px 30px rgba(0,0,0,.22),
        0 0 0 1px rgba(129,216,208,.06);
    }
    .clientBadgeAvatar{
      width:52px;
      height:52px;
      flex:0 0 52px;
      border-radius:999px;
      border:1px solid rgba(183,192,206,.28);
      display:grid;
      place-items:center;
      color:rgba(243,247,252,.9);
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.16), rgba(255,255,255,.05) 52%, rgba(255,255,255,.015)),
        radial-gradient(100% 100% at 70% 80%, rgba(129,216,208,.16), rgba(129,216,208,.02) 62%, rgba(129,216,208,0)),
        rgba(20,24,34,.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 14px rgba(5,8,14,.2);
    }
    .clientBadgeAvatar--accent{
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.22), rgba(255,255,255,.06) 52%, rgba(255,255,255,.02)),
        radial-gradient(100% 100% at 72% 78%, rgba(129,216,208,.22), rgba(129,216,208,.04) 60%, rgba(129,216,208,0)),
        rgba(14,18,28,.8);
      border-color: rgba(129,216,208,.26);
    }
    .clientBadgeAvatar--photo{
      color:transparent;
      font-size:0;
      text-shadow:none;
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:center, center;
      border-color: rgba(181,193,212,.36);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        0 6px 14px rgba(5,8,14,.2);
    }
    .clientBadgeAvatar--logo{
      --client-logo-image: none;
      --client-logo-scale: 1;
      --client-logo-shift-x: 0px;
      --client-logo-shift-y: 0px;
      color:transparent;
      font-size:0;
      text-shadow:none;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.16), rgba(255,255,255,.05) 52%, rgba(255,255,255,.015)),
        radial-gradient(100% 100% at 70% 80%, rgba(129,216,208,.14), rgba(129,216,208,.02) 62%, rgba(129,216,208,0)),
        rgba(20,24,34,.78);
      border-color: rgba(181,193,212,.36);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        0 6px 14px rgba(5,8,14,.2);
    }
    .clientBadgeAvatar--logo:not(.clientBadgeAvatar--logo-wide){
      border:none;
      box-shadow: 0 6px 14px rgba(5,8,14,.2);
    }
    .clientBadgeAvatar--logo::before{
      content:"";
      position:absolute;
      inset:2px;
      border-radius:999px;
      background:
        radial-gradient(130% 130% at 30% 24%, rgba(255,255,255,.10), rgba(255,255,255,.02) 56%, rgba(255,255,255,0)),
        rgba(10,13,20,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      pointer-events:none;
    }
    .clientBadgeAvatar--logo::after{
      content:"";
      position:absolute;
      inset:3px;
      border-radius:999px;
      background-image: var(--client-logo-image);
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      transform: translate(var(--client-logo-shift-x), var(--client-logo-shift-y)) scale(var(--client-logo-scale));
      transform-origin:center;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.16));
      pointer-events:none;
    }
    .clientBadgeAvatar--logo-wide{
      width:92px;
      height:52px;
      flex:0 0 92px;
      border-radius:13px;
      place-items:stretch;
    }
    .clientBadgeAvatar--logo-wide::before{
      inset:2px;
      border-radius:11px;
    }
    .clientBadgeAvatar--logo-wide::after{
      inset:4px 7px;
      border-radius:9px;
    }
    .clientBadgeAvatar--logo.clientBadgeAvatar--accent{
      border-color: rgba(129,216,208,.34);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        0 6px 16px rgba(5,8,14,.22);
    }
    .clientBadgeAvatar--logo.clientBadgeAvatar--accent:not(.clientBadgeAvatar--logo-wide){
      border:none;
      box-shadow: 0 6px 16px rgba(5,8,14,.22);
    }
    .clientBadgeAvatar--logo.clientBadgeAvatar--accent::before{
      background:
        radial-gradient(140% 140% at 30% 20%, rgba(255,255,255,.11), rgba(255,255,255,.02) 56%, rgba(255,255,255,0)),
        radial-gradient(100% 100% at 72% 76%, rgba(129,216,208,.14), rgba(129,216,208,.03) 60%, rgba(129,216,208,0)),
        rgba(10,14,22,.38);
    }
    .clientBadgeAvatar--vacio{ --client-logo-image: url("../images/logobrend-vacio.jpg"); --client-logo-scale: 1.06; }
    .clientBadgeAvatar--litenergy{ --client-logo-image: url("../images/logobrend-litenergy.png"); --client-logo-scale: 1.02; }
    .clientBadgeAvatar--litvin{ --client-logo-image: url("../images/logobrend-litvin.jpg"); --client-logo-scale: 1.06; }
    .clientBadgeAvatar--luxury{ --client-logo-image: url("../images/logobrend-theluxury.png"); --client-logo-scale: 1.04; }
    .clientBadgeAvatar--stas{ --client-logo-image: url("../images/logobrend-stas.jpg"); --client-logo-scale: 1.02; }
    .clientBadgeAvatar--arena{ --client-logo-image: url("../images/logobrend-arena.png"); --client-logo-scale: 1.04; }
    .clientBadgeAvatar--logo.clientBadgeAvatar--arena{
      background:#05070b;
      border:none;
      box-shadow: 0 4px 10px rgba(15,23,42,.08);
    }
    .clientBadgeAvatar--logo.clientBadgeAvatar--arena::before{
      background:#05070b;
      box-shadow:none;
    }
    .clientBadgeAvatar--evedex{ --client-logo-image: url("../images/logobrend-evedex.jpg"); --client-logo-scale: 1.04; }
    .clientBadgeAvatar--thomaskralow{ --client-logo-image: url("../images/logobrend-thomaskralow.jpg"); --client-logo-scale: 1.02; }
    .clientBadgeAvatar--kowiygames{ --client-logo-image: url("../images/logobrend-kowiygames.png"); --client-logo-scale: 1.1; }
    .clientBadgeAvatar--leraancho{ --client-logo-image: url("../images/logobrend-lerancho.jpg"); --client-logo-scale: 1.03; }
    .clientBadgeAvatar--lonato{ --client-logo-image: url("../images/logobrend-lonato.webp"); --client-logo-scale: 1.08; }
    .clientBadgeAvatar--sezony{ --client-logo-image: url("../images/logobrend-sezoni.jpg"); --client-logo-scale: 1.04; }
    .clientBadgeAvatar--majestic{ --client-logo-image: url("../images/logobrend-majestic.png"); --client-logo-scale: 1.08; }
    .clientBadgeAvatar--rlt{ --client-logo-image: url("../images/logobrend-rlt (2).png"); --client-logo-scale: 1; }
    .clientBadgeAvatar--makstem{ --client-logo-image: url("../images/logobrend-makstem.webp"); --client-logo-scale: 0.98; }
    .clientBadgeAvatar--marco9{ --client-logo-image: url("../images/logobrend-marco9.jpg"); --client-logo-scale: 1.04; }
    .clientBadgeAvatar--winline{ --client-logo-image: url("../images/logobrend-winline.png"); --client-logo-scale: 1.02; }
    .clientBadgeAvatar--alekseevberloga{ --client-logo-image: url("../images/logobrend-alekseevberloga.jpg"); --client-logo-scale: 1.02; }
    .clientBadgeAvatar--hype{ --client-logo-image: url("../images/logobrend-HYPE.png"); --client-logo-scale: 1.06; }
    .clientBadgeAvatar--zloy{
      background-image:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/zloy-ava.jpg");
    }
    .clientBadgeAvatar--parade{
      background-image:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/parade-ava.jpg");
    }
    .clientBadgeAvatar--gorila{
      background-image:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
        url("../images/gorila-ava.jpg");
    }
    .clientBadgeName{
      min-width:0;
      color:rgba(245,248,252,.96);
      font-size:clamp(16px, 1.26vw, 21px);
      font-weight:900;
      letter-spacing:-.015em;
      line-height:1.06;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      text-transform:uppercase;
      opacity:.96;
    }
    .clientBadge--logoOnly{
      width:var(--client-badge-logo-width, 236px);
      min-width:var(--client-badge-logo-width, 236px);
      max-width:none;
      justify-content:center;
      gap:0;
      padding:5px 7px;
    }
    .clientBadge--logoOnly .clientBadgeName{
      display:none;
    }
    .clientBadge--logoOnly .clientBadgeAvatar{
      width:100%;
      height:100%;
      flex:1 1 auto;
      border:none;
      border-radius: var(--client-logo-frame-radius, 0px);
      background:transparent;
      box-shadow:none;
      overflow:hidden;
      -webkit-clip-path: inset(0 round var(--client-logo-frame-radius, 0px));
      clip-path: inset(0 round var(--client-logo-frame-radius, 0px));
    }
    .clientBadge--logoOnly .clientBadgeAvatar::before{
      display:none;
    }
    .clientBadge--logoOnly .clientBadgeAvatar::after{
      inset: var(--client-logo-only-inset, 0px);
      border-radius:0;
      filter:none;
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      transform: translate(var(--client-logo-shift-x), var(--client-logo-shift-y)) scale(var(--client-logo-scale));
    }
    .clientBadge--logoOnly-winline{ --client-badge-logo-width: 246px; }
    .clientBadge--logoOnly-kowiy{ --client-badge-logo-width: 268px; }
    .clientBadge--logoOnly-litenergy{ --client-badge-logo-width: 236px; }
    .clientBadge--logoOnly-majestic{ --client-badge-logo-width: 214px; }
    .clientBadge--logoOnly-hype{ --client-badge-logo-width: 206px; }
    .clientBadge--logoOnly-luxury{ --client-badge-logo-width: 328px; }
    .clientBadge--logoOnly-lonato{ --client-badge-logo-width: 248px; }
    .clientBadge--logoOnly-rlt{ --client-badge-logo-width: 440px; }
    .clientBadge--logoOnly-winline,
    .clientBadge--logoOnly-litenergy{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      border-color: rgba(162,178,202,.36);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 16px 34px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.05);
    }
    .clientBadge--logoOnly-winline:hover,
    .clientBadge--logoOnly-litenergy:hover{
      border-color: rgba(129,216,208,.56);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 18px 38px rgba(0,0,0,.24),
        0 0 0 1px rgba(129,216,208,.16);
    }
    .clientBadge--logoOnly-winline{
      background:
        radial-gradient(82% 112% at 34% 48%, rgba(255,128,64,.16), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.09), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.58);
    }
    .clientBadge--logoOnly-litenergy{
      padding:0;
      border-color: rgba(72,232,221,.54);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 18px 38px rgba(0,0,0,.24),
        0 0 0 1px rgba(72,232,221,.2),
        0 0 24px rgba(72,232,221,.18);
      background:
        radial-gradient(84% 112% at 50% 44%, rgba(72,232,221,.16), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.09), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.58);
    }
    .clientBadge--logoOnly-rlt{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      background:
        linear-gradient(180deg, rgba(17,23,34,.96), rgba(8,11,18,.97));
      border-color: rgba(165,178,200,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 16px 34px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.05);
    }
    .clientBadge--logoOnly .clientBadgeAvatar--winline{
      --client-logo-scale: 2.2;
      --client-logo-only-inset: -2px -12px;
      --client-logo-shift-x: 4px;
      --client-logo-shift-y: -4px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--kowiygames{
      --client-logo-scale: 3.05;
      --client-logo-only-inset: -6px -18px;
      --client-logo-shift-y: -1px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--litenergy{
      --client-logo-scale: 1.42;
      --client-logo-only-inset: -8px -6px;
      --client-logo-shift-y: 0px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--rlt{
      --client-logo-scale: 1;
      --client-logo-only-inset: 4px 8px;
      --client-logo-shift-y: 0px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--litenergy::before{
      display:none;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--winline::after{
      filter:
        brightness(1.03)
        contrast(1.09);
    }
    .clientBadge--logoOnly .clientBadgeAvatar--luxury{
      --client-logo-scale: .96;
      --client-logo-only-inset: 1px 3px;
      --client-logo-shift-y: -1px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--majestic{
      --client-logo-scale: .99;
      --client-logo-only-inset: 1px 8px 1px 12px;
      --client-logo-shift-y: 0px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--hype{
      --client-logo-scale: 1.08;
      --client-logo-only-inset: 1px 10px;
      --client-logo-shift-y: 0px;
    }
    .clientBadge--logoOnly .clientBadgeAvatar--lonato{
      --client-logo-scale: 1.06;
      --client-logo-only-inset: 2px 10px;
      --client-logo-shift-y: 0px;
    }
    html:not(.dark) .clientsStripWrap{
      border-color: rgba(173,183,198,.28);
      background:
        radial-gradient(980px 360px at 50% -10%, rgba(129,216,208,.12), transparent 72%),
        radial-gradient(920px 420px at 50% 110%, rgba(129,216,208,.08), transparent 78%),
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,253,.72));
      box-shadow:
        0 20px 46px rgba(15,23,42,.07),
        0 2px 12px rgba(15,23,42,.03),
        inset 0 1px 0 rgba(255,255,255,.86);
      backdrop-filter: blur(10px) saturate(1.03);
      -webkit-backdrop-filter: blur(10px) saturate(1.03);
    }
    html:not(.dark) .clientsStripWrap::before{
      background:
        radial-gradient(42% 44% at 22% 74%, rgba(129,216,208,.08), transparent 74%),
        radial-gradient(46% 42% at 78% 26%, rgba(129,216,208,.06), transparent 76%);
      opacity:.62;
      filter: blur(20px);
    }
    html:not(.dark) .clientsStripTitle{
      color: rgba(12,18,28,.94);
      text-shadow: 0 10px 24px rgba(129,216,208,.10);
    }
    html:not(.dark) .clientsStripSub{
      color: rgba(47,57,72,.72);
    }
    html:not(.dark) .clientsStripLane::before{
      background:
        linear-gradient(90deg, rgba(129,216,208,.03), transparent 12%, transparent 88%, rgba(129,216,208,.03));
      opacity:.55;
    }
    html:not(.dark) .clientBadge{
      border-color: rgba(176,186,202,.34);
      background:
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.07), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,252,.82));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        0 8px 18px rgba(15,23,42,.07),
        0 1px 0 rgba(255,255,255,.52);
    }
    html:not(.dark) .clientBadge:hover{
      border-color: rgba(129,216,208,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 10px 22px rgba(15,23,42,.08),
        0 0 0 1px rgba(129,216,208,.08);
    }
    html:not(.dark) .clientBadgeAvatar{
      color: rgba(34,44,58,.9);
      border-color: rgba(178,188,204,.38);
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.84), rgba(255,255,255,.28) 52%, rgba(255,255,255,.08)),
        radial-gradient(100% 100% at 70% 80%, rgba(129,216,208,.18), rgba(129,216,208,.03) 62%, rgba(129,216,208,0)),
        rgba(236,240,246,.88);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 4px 10px rgba(15,23,42,.06);
    }
    html:not(.dark) .clientBadgeAvatar--accent{
      border-color: rgba(129,216,208,.34);
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.9), rgba(255,255,255,.3) 52%, rgba(255,255,255,.08)),
        radial-gradient(100% 100% at 72% 78%, rgba(129,216,208,.22), rgba(129,216,208,.05) 60%, rgba(129,216,208,0)),
        rgba(231,244,244,.92);
    }
    html:not(.dark) .clientBadgeAvatar--photo{
      border-color: rgba(176,188,205,.42);
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:center, center;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.24),
        0 4px 10px rgba(15,23,42,.08);
    }
    html:not(.dark) .clientBadgeAvatar--logo{
      border-color: rgba(176,188,205,.42);
      background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.88), rgba(255,255,255,.3) 52%, rgba(255,255,255,.08)),
        radial-gradient(100% 100% at 70% 80%, rgba(129,216,208,.18), rgba(129,216,208,.03) 62%, rgba(129,216,208,0)),
        rgba(236,240,246,.9);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 4px 10px rgba(15,23,42,.08);
    }
    html:not(.dark) .clientBadgeAvatar--logo:not(.clientBadgeAvatar--logo-wide){
      border:none;
      box-shadow: 0 4px 10px rgba(15,23,42,.08);
    }
    html:not(.dark) .clientBadgeAvatar--logo::before{
      background:
        radial-gradient(130% 130% at 30% 24%, rgba(255,255,255,.7), rgba(255,255,255,.14) 56%, rgba(255,255,255,0)),
        rgba(223,230,239,.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    }
    html:not(.dark) .clientBadgeAvatar--logo::after{
      filter: drop-shadow(0 1px 2px rgba(17,22,34,.12));
    }
    html:not(.dark) .clientBadgeAvatar--logo.clientBadgeAvatar--accent{
      border-color: rgba(129,216,208,.34);
    }
    html:not(.dark) .clientBadgeAvatar--logo.clientBadgeAvatar--accent:not(.clientBadgeAvatar--logo-wide){
      border:none;
    }
    html:not(.dark) .clientBadgeAvatar--logo.clientBadgeAvatar--accent::before{
      background:
        radial-gradient(130% 130% at 30% 24%, rgba(255,255,255,.76), rgba(255,255,255,.18) 56%, rgba(255,255,255,0)),
        radial-gradient(100% 100% at 72% 78%, rgba(129,216,208,.18), rgba(129,216,208,.04) 60%, rgba(129,216,208,0)),
        rgba(224,238,240,.58);
    }
    html:not(.dark) .clientBadgeAvatar--logo.clientBadgeAvatar--arena{
      background:#05070b;
      border:none;
      box-shadow: 0 4px 10px rgba(15,23,42,.08);
    }
    html:not(.dark) .clientBadgeAvatar--logo.clientBadgeAvatar--arena::before{
      background:#05070b;
      box-shadow:none;
    }
    html:not(.dark) .clientBadgeAvatar--zloy{
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        url("../images/zloy-ava.jpg");
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:center, center;
    }
    html:not(.dark) .clientBadgeAvatar--parade{
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        url("../images/parade-ava.jpg");
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:center, center;
    }
    html:not(.dark) .clientBadgeAvatar--gorila{
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        url("../images/gorila-ava.jpg");
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:center, center;
    }
    html:not(.dark) .clientBadgeName{
      color: rgba(20,28,40,.92);
      text-shadow:none;
    }
    html:not(.dark) .clientBadge--logoOnly .clientBadgeAvatar{
      background:transparent;
      box-shadow:none;
      border:none;
    }
    html:not(.dark) .clientBadge--logoOnly-majestic{
      background:#000;
      border-color: rgba(20,22,28,.86);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 24px rgba(15,23,42,.16),
        0 0 0 1px rgba(0,0,0,.22);
    }
    html:not(.dark) .clientBadge--logoOnly-hype{
      background:#000;
      border-color: rgba(20,22,28,.86);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 24px rgba(15,23,42,.16),
        0 0 0 1px rgba(0,0,0,.22);
    }
    html:not(.dark) .clientBadge--logoOnly-winline,
    html:not(.dark) .clientBadge--logoOnly-litenergy,
    html:not(.dark) .clientBadge--logoOnly-lonato{
      background:
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.07), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,252,.82));
      border-color: rgba(176,186,202,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        0 8px 18px rgba(15,23,42,.07),
        0 1px 0 rgba(255,255,255,.52);
    }
    html:not(.dark) .clientBadge--logoOnly-litenergy{
      border-color: rgba(74,204,196,.58);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 10px 22px rgba(15,23,42,.09),
        0 0 0 1px rgba(74,204,196,.18),
        0 0 20px rgba(74,204,196,.14);
      background:
        radial-gradient(88% 118% at 52% 46%, rgba(124,243,233,.22), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.09), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,248,252,.84));
    }
    html:not(.dark) .clientBadge--logoOnly-rlt{
      background:#000;
      border-color: rgba(20,22,28,.9);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 24px rgba(15,23,42,.16),
        0 0 0 1px rgba(0,0,0,.24);
    }
    html:not(.dark) .clientBadge--logoOnly .clientBadgeAvatar--majestic::after{
      filter:
        drop-shadow(0 1px 3px rgba(0,0,0,.08))
        contrast(1.05);
    }
    html:not(.dark) .clientBadge--logoOnly .clientBadgeAvatar::after{
      filter:none;
    }
    html:not(.dark) .clientBadge--logoOnly-majestic .clientBadgeAvatar--majestic::after{
      filter:
        brightness(1.05)
        contrast(1.12)
        drop-shadow(0 1px 4px rgba(0,0,0,.18));
    }
    html:not(.dark) .clientBadge--logoOnly-hype .clientBadgeAvatar--hype::after{
      filter:
        brightness(1.08)
        contrast(1.14)
        drop-shadow(0 1px 4px rgba(0,0,0,.22));
    }
    html:not(.dark) .clientBadge--logoOnly-lonato .clientBadgeAvatar--lonato::after{
      filter:
        brightness(1.05)
        contrast(1.08)
        drop-shadow(0 1px 4px rgba(0,0,0,.18));
    }
    html:not(.dark) .clientBadge--logoOnly .clientBadgeAvatar--litenergy::before{
      background:
        radial-gradient(90% 120% at 38% 50%, rgba(255,255,255,.18), rgba(255,255,255,.05) 70%, rgba(255,255,255,0)),
        rgba(23,31,44,.62);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 0 1px rgba(255,255,255,.06);
    }
    html.dark .clientsStripSub{
      color:rgba(214,225,237,.82);
    }
    html.dark .clientsStripWrap{
      border-color: rgba(179,189,206,.22);
      background:
        radial-gradient(980px 360px at 50% -10%, rgba(129,216,208,.12), transparent 72%),
        radial-gradient(920px 420px at 50% 110%, rgba(129,216,208,.1), transparent 76%),
        linear-gradient(180deg, rgba(228,238,252,.03), rgba(228,238,252,.008)),
        rgba(6,9,15,.36);
      box-shadow:
        0 22px 64px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
    }
    html.dark .clientBadge--logoOnly-kowiy{
      background:
        radial-gradient(82% 110% at 46% 52%, rgba(255,108,76,.10), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.07), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly-luxury{
      background:
        linear-gradient(180deg, rgba(249,252,255,.96), rgba(238,245,252,.92));
      border-color: rgba(194,205,221,.5);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 10px 22px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.09);
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--kowiygames::after{
      filter:
        brightness(1.55)
        saturate(1.2)
        contrast(1.12)
        drop-shadow(0 0 8px rgba(255,98,64,.16));
    }
    html.dark .clientBadge--logoOnly-majestic{
      background:
        radial-gradient(84% 110% at 50% 50%, rgba(255,255,255,.045), transparent 74%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.07), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly-hype{
      background:
        radial-gradient(82% 112% at 64% 38%, rgba(255,72,132,.10), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.06), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly-lonato{
      background:
        radial-gradient(84% 112% at 34% 42%, rgba(255,113,72,.10), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.06), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly-winline{
      background:
        radial-gradient(82% 112% at 34% 48%, rgba(255,128,64,.14), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.06), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly-litenergy{
      border-color: rgba(74,216,208,.54);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 18px 38px rgba(0,0,0,.3),
        0 0 0 1px rgba(74,216,208,.18),
        0 0 22px rgba(72,232,221,.16);
      background:
        radial-gradient(84% 112% at 50% 44%, rgba(72,232,221,.14), transparent 72%),
        radial-gradient(130% 120% at 100% 0%, rgba(129,216,208,.06), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(8,11,18,.56);
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--winline::after{
      filter:
        brightness(1.04)
        contrast(1.08);
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--majestic::after{
      filter:
        brightness(1.12)
        contrast(1.06)
        drop-shadow(0 0 8px rgba(255,255,255,.05));
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--hype::after{
      filter:
        brightness(1.08)
        contrast(1.08)
        drop-shadow(0 0 8px rgba(255,86,140,.10));
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--lonato::after{
      filter:
        brightness(1.04)
        contrast(1.06)
        drop-shadow(0 0 8px rgba(255,102,64,.08));
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--litenergy::after{
      filter:
        brightness(1.03)
        contrast(1.06)
        drop-shadow(0 0 8px rgba(72,232,221,.12));
    }
    html.dark .clientBadge--logoOnly .clientBadgeAvatar--kowiygames::before{
      display:block;
      inset: 6px 16px;
      border-radius: 999px;
      background:
        radial-gradient(90% 120% at 38% 50%, rgba(255,255,255,.18), rgba(255,255,255,.04) 70%, rgba(255,255,255,0)),
        rgba(255,255,255,.045);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(255,255,255,.04);
      pointer-events:none;
    }
    @keyframes clientsStripLeft{
      from{ transform: translate3d(0,0,0); }
      to{ transform: translate3d(-50%,0,0); }
    }
    @keyframes clientsStripRight{
      from{ transform: translate3d(-50%,0,0); }
      to{ transform: translate3d(0,0,0); }
    }
    @media (max-width: 980px){
      .clientBadge{
        width:max-content;
        min-width:0;
      max-width:min(56vw, 400px);
      height:86px;
      padding:14px 15px;
      gap:12px;
      }
      .clientBadgeAvatar{
        width:46px;
        height:46px;
        flex-basis:46px;
        font-size:10px;
      }
      .clientBadgeAvatar--logo-wide{
        width:82px;
        height:46px;
        flex-basis:82px;
        border-radius:12px;
      }
      .clientBadge--logoOnly{
        padding:4px 6px;
      }
      .clientBadge--logoOnly-winline{ --client-badge-logo-width: 226px; }
      .clientBadge--logoOnly-kowiy{ --client-badge-logo-width: 246px; }
      .clientBadge--logoOnly-litenergy{ --client-badge-logo-width: 218px; }
      .clientBadge--logoOnly-majestic{ --client-badge-logo-width: 198px; }
      .clientBadge--logoOnly-hype{ --client-badge-logo-width: 190px; }
      .clientBadge--logoOnly-luxury{ --client-badge-logo-width: 286px; }
      .clientBadge--logoOnly-lonato{ --client-badge-logo-width: 228px; }
      .clientBadge--logoOnly-rlt{ --client-badge-logo-width: 400px; }
      .clientsStripTrack{ animation-duration: 27s; }
      .clientsStripLane--reverse .clientsStripTrack{ animation-duration: 29s; }
    }
    @media (max-width: 820px){
      #clientsStrip{ padding-top:18px; }
      .clientsStripWrap{
        border-radius:22px;
        padding:22px 0 18px;
      }
      .clientsStripSub{
        margin-top:10px;
        max-width: 42ch;
      }
      .clientsStripRows{
        margin-top:14px;
        gap:10px;
      }
      .clientsStripGroup{
        gap:10px;
        padding-right:10px;
      }
      .clientBadge{
        width:max-content;
        min-width:0;
        max-width:min(72vw, 380px);
        height:76px;
        border-radius:17px;
      }
      .clientBadgeName{
        font-size:15px;
      }
      .clientBadgeAvatar--logo-wide{
        width:72px;
        height:42px;
        flex-basis:72px;
        border-radius:11px;
      }
      .clientBadge--logoOnly{
        padding:4px 5px;
      }
      .clientBadge--logoOnly-winline{ --client-badge-logo-width: 206px; }
      .clientBadge--logoOnly-kowiy{ --client-badge-logo-width: 222px; }
      .clientBadge--logoOnly-litenergy{ --client-badge-logo-width: 198px; }
      .clientBadge--logoOnly-majestic{ --client-badge-logo-width: 182px; }
      .clientBadge--logoOnly-hype{ --client-badge-logo-width: 176px; }
      .clientBadge--logoOnly-luxury{ --client-badge-logo-width: 246px; }
      .clientBadge--logoOnly-lonato{ --client-badge-logo-width: 208px; }
      .clientBadge--logoOnly-rlt{ --client-badge-logo-width: 340px; }
      .clientsStripTrack{ animation-duration: 23s; }
      .clientsStripLane--reverse .clientsStripTrack{ animation-duration: 25s; }
    }
    @media (max-width: 560px){
      .clientsStripLane{
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
      }
      .clientBadge{
        width:max-content;
        min-width:0;
        max-width:min(88vw, 330px);
        height:70px;
        padding:11px 12px;
        gap:8px;
      }
      .clientBadgeAvatar{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:9px;
      }
      .clientBadgeAvatar--logo-wide{
        width:64px;
        height:38px;
        flex-basis:64px;
        border-radius:10px;
      }
      .clientBadge--logoOnly{
        padding:2px 3px;
      }
      .clientBadge--logoOnly-kowiy{ --client-badge-logo-width: 198px; }
      .clientBadge--logoOnly-hype{ --client-badge-logo-width: 176px; }
      .clientBadge--logoOnly-lonato{ --client-badge-logo-width: 190px; }
      .clientBadge--logoOnly-winline{ --client-badge-logo-width: 206px; }
      .clientBadge--logoOnly-litenergy{ --client-badge-logo-width: 206px; }
      .clientBadge--logoOnly-luxury{ --client-badge-logo-width: 224px; }
      .clientBadge--logoOnly-majestic{ --client-badge-logo-width: 182px; }
      .clientBadge--logoOnly-rlt{ --client-badge-logo-width: 252px; }
      .clientBadge--logoOnly-litenergy{ padding:0; }
      .clientBadge--logoOnly.clientBadge--logoOnly-winline,
      .clientBadge--logoOnly.clientBadge--logoOnly-litenergy,
      .clientBadge--logoOnly.clientBadge--logoOnly-luxury,
      .clientBadge--logoOnly.clientBadge--logoOnly-majestic,
      .clientBadge--logoOnly.clientBadge--logoOnly-kowiy,
      .clientBadge--logoOnly.clientBadge--logoOnly-hype,
      .clientBadge--logoOnly.clientBadge--logoOnly-lonato,
      .clientBadge--logoOnly.clientBadge--logoOnly-rlt{
        width:var(--client-badge-logo-width) !important;
        min-width:var(--client-badge-logo-width) !important;
        max-width:var(--client-badge-logo-width) !important;
        flex:0 0 var(--client-badge-logo-width) !important;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--winline{
        --client-logo-scale: 2.08;
        --client-logo-only-inset: -2px -10px;
        --client-logo-shift-x: 0px;
        --client-logo-shift-y: -2px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--litenergy{
        --client-logo-scale: 1.42;
        --client-logo-only-inset: -8px -6px;
        --client-logo-shift-x: 0px;
        --client-logo-shift-y: 0px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--luxury{
        --client-logo-scale: .92;
        --client-logo-only-inset: 2px 8px;
        --client-logo-shift-y: -1px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--kowiygames{
        --client-logo-scale: 2.7;
        --client-logo-only-inset: -5px -14px;
        --client-logo-shift-y: -1px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--hype{
        --client-logo-scale: 1.02;
        --client-logo-only-inset: 1px 8px;
        --client-logo-shift-y: 0px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--lonato{
        --client-logo-scale: 1.02;
        --client-logo-only-inset: 1px 8px;
        --client-logo-shift-y: 0px;
      }
      .clientBadge--logoOnly .clientBadgeAvatar--rlt{
        --client-logo-scale: .96;
        --client-logo-only-inset: 3px 9px;
      }
      .clientBadgeName{
        font-size:14px;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .clientsStripTrack{
        animation: none !important;
      }
    }

    .gridWork{ margin-top:18px; display:grid; gap:14px; grid-template-columns: repeat(1, minmax(0,1fr)); }

    .work{
      position:relative;
      border-radius:24px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      overflow:hidden;
      cursor:pointer;
      box-shadow: 0 18px 55px rgba(17,12,46,.10);
      transition: transform .55s cubic-bezier(.22,.72,.2,1), opacity .45s ease, box-shadow .25s ease;
    }
    .work.work-enter{ opacity:0; transform: translateY(16px) scale(.98); }
    .work.work-enter.is-in{ opacity:1; transform: translateY(0) scale(1); }
    .work:hover{ transform: translateY(-2px); box-shadow: 0 18px 55px rgba(17,12,46,.14); }
    .workEmpty{
      cursor:default;
      text-align:center;
      padding:32px;
      background: var(--paperGlass2);
      border:1px dashed var(--line);
      box-shadow:none;
    }
    .workEmpty:hover{ transform:none; box-shadow:none; }
    .workEmpty .workTitle{ font-size:18px; }
    .workEmpty .workDesc{ max-height:none; overflow:visible; }

    .workMedia{ height:176px; width:100%; background: var(--fog); display:flex; align-items:center; justify-content:center; color:var(--muted2); font-weight:800; }
    .workMedia img{ width:100%; height:100%; object-fit:cover; display:block; }

    .work::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(620px 240px at 15% 20%, rgba(2,6,23,.12), transparent 55%),
        radial-gradient(540px 240px at 80% 10%, rgba(129,216,208,.12), transparent 55%);
      opacity:0;
      transition: opacity .35s ease;
      pointer-events:none;
    }
    .work:hover::after{ opacity:1; }

    .workBody{ padding:16px; }
    .badgeRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      border:1px solid var(--line);
      padding:6px 10px;
      font-size:11px;
      font-weight:900;
      color:var(--muted);
      background: var(--paperGlass2);
    }
    .badgeDot{ width:8px; height:8px; border-radius:999px; background:var(--accent); }
    .meta{ font-size:11px; color:var(--muted2); font-weight:800; }
    .workTitle{ margin-top:10px; font-weight:950; letter-spacing:-0.02em; font-size:18px; line-height:1.15; }
    .workDesc{ margin-top:8px; color:var(--muted); font-size:13px; line-height:1.55; max-height:4.65em; overflow:hidden; display:block; }

    .tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
    .tag{ font-size:11px; font-weight:900; color:var(--muted); border:1px solid var(--line); background: var(--fogGlass); padding:6px 10px; border-radius:999px; }

    @media (prefers-reduced-motion: reduce){
      .work{ transition: none; }
      .work.work-enter{ opacity:1; transform:none; }
    }

    .quickContactModal{
      position:fixed;
      inset:0;
      width:100vw;
      height:100vh;
      width:100dvw;
      height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:82;
      visibility:hidden;
      pointer-events:none;
      overflow:hidden;
      transition: visibility 0s linear .34s;
    }
    .quickContactModal.is-open{
      visibility:visible;
      pointer-events:auto;
      transition: visibility 0s;
    }
    .quickContactBackdrop{
      position:absolute;
      inset:0;
      background: rgba(2,6,23,.30);
      opacity:0;
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      transition: opacity .22s ease, backdrop-filter .34s ease, -webkit-backdrop-filter .34s ease;
    }
    .quickContactModal.is-open .quickContactBackdrop{
      opacity:1;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    body.quick-contact-open header{
      z-index:90;
      pointer-events:none;
    }
    .quickContactPanel{
      position:relative;
      width:min(980px, calc(100% - 24px));
      max-width:calc(100vw - 24px);
      max-width:calc(100dvw - 24px);
      max-height:calc(100vh - 24px);
      max-height:calc(100dvh - 24px);
      border-radius:26px;
      border:1px solid rgba(182,194,214,.3);
      background:
        radial-gradient(140% 120% at 0% -16%, rgba(129,216,208,.16), transparent 62%),
        radial-gradient(120% 120% at 100% 120%, rgba(129,216,208,.12), transparent 66%),
        linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.015) 100%),
        linear-gradient(180deg, rgba(247,249,253,.62), rgba(240,243,249,.52));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(255,255,255,.14),
        0 30px 90px rgba(0,0,0,.34);
      backdrop-filter: blur(20px) saturate(1.14);
      -webkit-backdrop-filter: blur(20px) saturate(1.14);
      padding:16px;
      opacity:0;
      transform: translateY(10px) scale(.98);
      transition: transform .34s ease, opacity .34s ease;
      overflow:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    .quickContactModal.is-open .quickContactPanel{
      opacity:1;
      transform: translateY(0) scale(1);
    }
    html.dark .quickContactPanel{
      background:
        radial-gradient(140% 120% at 0% -16%, rgba(129,216,208,.22), transparent 62%),
        radial-gradient(120% 120% at 100% 120%, rgba(129,216,208,.14), transparent 66%),
        linear-gradient(140deg, rgba(230,239,252,.09) 0%, rgba(192,208,229,.04) 42%, rgba(129,216,208,.015) 100%),
        linear-gradient(180deg, rgba(10,14,24,.64), rgba(7,10,17,.58));
      border-color: rgba(186,198,218,.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(255,255,255,.08),
        0 34px 100px rgba(0,0,0,.5);
    }
    .quickContactPanel::before{
      content:"";
      position:absolute;
      inset:1px 1px auto 1px;
      height:36%;
      border-radius:24px 24px 18px 18px;
      pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
      opacity:.38;
    }
    html.dark .quickContactPanel::before{
      background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
      opacity:.3;
    }
    .quickContactPanel::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset 0 26px 32px rgba(255,255,255,.06),
        inset 0 -26px 32px rgba(8,12,20,.16);
    }
    html.dark .quickContactPanel::after{
      box-shadow:
        inset 0 0 0 1px rgba(198,210,229,.16),
        inset 0 24px 32px rgba(255,255,255,.07),
        inset 0 -28px 34px rgba(3,6,12,.22);
    }
    .quickContactClose{
      position:absolute;
      right:12px;
      top:12px;
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      color:var(--ink);
      font-weight:900;
      font-size:18px;
      cursor:pointer;
      z-index:2;
    }
    .quickContactEyebrow{
      font-size:11px;
      font-weight:900;
      color:var(--muted2);
      letter-spacing:.1em;
      text-transform:uppercase;
      position:relative;
      z-index:1;
    }
    .quickContactTitle{
      margin-top:4px;
      font-weight:950;
      letter-spacing:-.02em;
      font-size:24px;
      line-height:1.16;
      position:relative;
      z-index:1;
    }
    .quickContactSub{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
      max-width:92%;
      position:relative;
      z-index:1;
    }
    .quickContactGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .quickContactCard{
      border-radius:18px;
      border:1px solid rgba(176,188,205,.26);
      background:
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.1), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
      padding:14px;
      transform: translateY(8px);
      opacity:0;
      filter: blur(4px);
      transition: transform .28s ease, opacity .28s ease, filter .28s ease, border-color .22s ease, background .22s ease;
      overflow:hidden;
      backdrop-filter: blur(12px) saturate(1.08);
      -webkit-backdrop-filter: blur(12px) saturate(1.08);
    }
    .quickContactModal.is-open .quickContactCard{
      transform: translateY(0);
      opacity:1;
      filter: blur(0);
    }
    .quickContactModal.is-open .quickContactCard:nth-child(1){ transition-delay:.05s; }
    .quickContactModal.is-open .quickContactCard:nth-child(2){ transition-delay:.1s; }
    html.dark .quickContactCard{
      border-color: rgba(182,195,215,.2);
      background:
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.12), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
    }
    .quickContactCard::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      opacity:.9;
    }
    html.dark .quickContactCard::before{
      box-shadow: inset 0 0 0 1px rgba(196,209,228,.12);
    }
    .quickContactCardTitle{
      font-size:18px;
      font-weight:930;
      letter-spacing:-.02em;
    }
    .quickContactCardSub{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.58;
    }
    .quickContactCardHint{
      margin-top:8px;
      color:var(--muted2);
      font-size:12px;
      line-height:1.55;
    }
    .quickContactActions{
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .quickContactCommunity{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .quickContactCommunityLabel{
      font-size:11px;
      font-weight:850;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted2);
      line-height:1.4;
    }
    .quickContactCommunity .quickContactLink{
      transform:none;
      opacity:1;
      padding:10px 12px;
      font-size:13px;
    }
    .quickContactLinks{
      margin-top:14px;
      display:grid;
      gap:10px;
    }
    .quickContactLink{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background: var(--paperGlass2);
      color:var(--ink);
      font-weight:850;
      letter-spacing:.01em;
      text-decoration:none;
      transform: translateY(8px);
      opacity:0;
      transition: transform .26s ease, opacity .26s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .quickContactModal.is-open .quickContactLink{
      transform: translateY(0);
      opacity:1;
    }
    .quickContactModal.is-open .quickContactLink:nth-child(1){ transition-delay:.05s; }
    .quickContactModal.is-open .quickContactLink:nth-child(2){ transition-delay:.09s; }
    .quickContactModal.is-open .quickContactLink:nth-child(3){ transition-delay:.13s; }
    .quickContactLink:hover{
      border-color: rgba(129,216,208,.54);
      box-shadow: 0 12px 26px rgba(17,12,46,.12);
      background: var(--paperGlass);
    }
    .quickContactActions .quickContactLink{
      width:100%;
      transform:none;
      opacity:1;
      padding:10px 12px;
      font-size:13px;
      justify-content:center;
      gap:7px;
    }
    .quickContactActions .quickContactLinkPrimary{
      background: rgba(248,251,255,.95);
      border-color: rgba(214,223,236,.8);
      color:#0b1220;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 20px rgba(15,22,35,.12);
    }
    html.dark .quickContactActions .quickContactLinkPrimary{
      background: rgba(246,250,255,.94);
      border-color: rgba(216,226,240,.72);
      color:#0a1220;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 10px 24px rgba(8,12,20,.22);
    }
    .quickContactActions .quickContactLinkPrimary .quickContactArrow{
      color: rgba(13,21,36,.66);
    }
    html.dark .quickContactActions .quickContactLinkPrimary .quickContactArrow{
      color: rgba(11,18,32,.68);
    }
    .quickContactLink.quickContactLinkNeutral{
      border-color: rgba(168,180,198,.24);
      background: rgba(255,255,255,.018);
      color: var(--muted2);
      box-shadow:none;
    }
    .quickContactLink.quickContactLinkNeutral:hover{
      border-color: rgba(176,189,208,.34);
      background: rgba(255,255,255,.04);
      color: var(--ink);
      box-shadow: 0 10px 22px rgba(12,14,24,.11);
    }
    html.dark .quickContactLink.quickContactLinkNeutral{
      border-color: rgba(158,172,193,.22);
      background: rgba(255,255,255,.012);
      color: rgba(188,198,214,.86);
    }
    html.dark .quickContactLink.quickContactLinkNeutral:hover{
      border-color: rgba(175,189,210,.3);
      background: rgba(255,255,255,.03);
      color: rgba(233,239,250,.95);
    }
    .quickContactEmailRow{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .quickContactEmailInfo{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .quickContactEmailLabel{
      font-size:11px;
      font-weight:900;
      color:var(--muted2);
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .quickContactEmailValue{
      color:var(--ink);
      text-decoration:none;
      font-weight:900;
      letter-spacing:-.01em;
    }
    .quickContactEmailValue:hover{ text-decoration:underline; }
    .quickContactCopyBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:12px;
      padding:10px 13px;
      border:1px solid rgba(173,185,202,.42);
      background: rgba(255,255,255,.08);
      color:var(--ink);
      font-weight:800;
      font-size:13px;
      cursor:pointer;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .quickContactCopyBtn:hover{
      border-color: rgba(168,181,201,.56);
      background: rgba(255,255,255,.14);
      transform: translateY(-1px);
    }
    html.dark .quickContactCopyBtn{
      border-color: rgba(177,190,209,.3);
      background: rgba(255,255,255,.035);
    }
    html.dark .quickContactCopyBtn:hover{
      border-color: rgba(190,204,223,.42);
      background: rgba(255,255,255,.07);
    }
    .quickContactBriefText{
      margin-top:10px;
      border-radius:14px;
      border:1px solid rgba(173,185,202,.34);
      background: rgba(7,10,17,.14);
      padding:12px;
      color:var(--muted);
      line-height:1.65;
    }
    .quickContactBriefText div + div{ margin-top:3px; }
    html.dark .quickContactBriefText{
      border-color: rgba(177,190,209,.24);
      background: rgba(6,9,15,.22);
    }
    .quickContactCopyWide{
      width:100%;
      margin-top:10px;
    }
    .quickContactFoot{
      margin-top:10px;
      font-size:12px;
      color:var(--muted2);
    }
    .quickContactArrow{
      font-size:14px;
      color:var(--muted2);
      transition: transform .2s ease, color .2s ease;
    }
    .quickContactLink:hover .quickContactArrow{
      color:var(--accent);
      transform: translateX(1px) translateY(-1px);
    }
    .quickContactNotice{
      margin-top:10px;
      min-height:18px;
      color:var(--muted2);
      font-size:12px;
      font-weight:800;
      letter-spacing:.01em;
      opacity:0;
      transform: translateY(4px);
      pointer-events:none;
      transition: opacity .24s ease, transform .24s ease, color .24s ease;
      position:relative;
      z-index:1;
    }
    .quickContactNotice.is-visible{
      opacity:1;
      transform: translateY(0);
      color:rgba(129,216,208,.95);
    }
    html.dark .quickContactNotice{
      color:rgba(190,199,214,.66);
    }
    html.dark .quickContactNotice.is-visible{
      color:rgba(174,235,230,.94);
    }
    @media (max-width: 860px){
      .quickContactGrid{ grid-template-columns:1fr; }
    }
    @media (max-width: 520px){
      .quickContactModal{
        align-items:flex-end;
        justify-content:center;
        padding:10px;
      }
      .quickContactPanel{
        width:min(420px, calc(100dvw - 20px));
        max-height:calc(100dvh - 20px);
        overflow:auto;
        -webkit-overflow-scrolling:touch;
        padding:14px;
        border-radius:18px;
      }
      .quickContactPanel{ padding:14px; border-radius:18px; }
      .quickContactClose{
        top:10px;
        right:10px;
        width:38px;
        height:38px;
      }
      .quickContactEyebrow{
        padding-right:42px;
      }
      .quickContactTitle{ font-size:21px; }
      .quickContactSub{ max-width:100%; }
      .quickContactGrid{
        gap:10px;
      }
      .quickContactCard{ padding:12px; }
      .quickContactActions{ grid-template-columns:1fr; }
      .quickContactActions .quickContactLink{ padding:10px; }
      .quickContactCommunity{
        gap:8px;
      }
      .quickContactCommunity .quickContactLink{
        width:100%;
      }
      .quickContactEmailRow{
        gap:10px;
      }
      .quickContactCopyBtn{ width:100%; }
      .quickContactNotice{
        margin-bottom:calc(env(safe-area-inset-bottom, 0px) + 2px);
      }
    }

    .modal{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:80;
      visibility:hidden;
      pointer-events:none;
      transition: visibility 0s linear .36s;
    }
    .modalOpen{
      visibility:visible;
      pointer-events:auto;
      transition: visibility 0s;
    }
    .backdrop{
      position:absolute;
      inset:0;
      background: rgba(2,6,23,.62);
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      opacity:0;
      transition:
        opacity .22s ease,
        backdrop-filter .4s ease,
        -webkit-backdrop-filter .4s ease;
    }
    .modalOpen .backdrop{
      opacity:1;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .sheet{
      position:relative;
      width: min(920px, calc(100% - 24px));
      border-radius:26px;
      border:1px solid var(--line);
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
      box-shadow: 0 24px 70px rgba(0,0,0,.28);
      overflow:hidden;
      max-height: calc(100vh - 24px);
      display:flex;
      flex-direction:column;
      opacity:0;
      transform: translateY(12px) scale(.98);
      transition: transform .35s ease, opacity .35s ease;
    }
    .modalOpen .sheet{
      opacity:1;
      transform: translateY(0) scale(1);
    }
    html.dark .sheet{
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    .sheetTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      position:sticky;
      top:0;
      z-index:2;
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.22), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
    }
    html.dark .sheetTop{
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(129,216,208,.10), transparent 75%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    .sheetTitle{ font-weight:950; letter-spacing:-0.02em; }
    .sheetMeta{ margin-top:2px; font-size:12px; color:var(--muted2); font-weight:800; }
    .close{ width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background: var(--paperGlass2); cursor:pointer; font-weight:900; color: var(--ink); }
    .sheetBody{
      padding:16px;
      position:relative;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      flex:1 1 auto;
    }
    .sheetLink{
      position:absolute;
      right:16px;
      bottom:16px;
      z-index:5;
      padding:8px 16px;
      border-radius:12px;
      font-size:12px;
      font-weight:900;
      border:1px solid var(--line);
      background: var(--ink);
      color: var(--paper);
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .sheetLink:hover{ opacity:.92; }
    .modalMedia{ border-radius:18px; border:1px solid var(--line); background: var(--fog); aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--muted2); font-weight:900; }
    .modalMedia.vertical{
      aspect-ratio:9/16;
      max-width:420px;
      margin:0 auto;
    }
    .modalMedia iframe, .modalMedia img{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
    .modalMedia video{ width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
    .modalViews{
      margin-top:8px;
      color:var(--muted2);
      font-size:12px;
      font-weight:800;
      letter-spacing:.02em;
    }
    .modalViews:empty{ display:none; }
    .modalDesc{ margin-top:12px; color:var(--muted); line-height:1.65; }
    .modalDesc a{ color: var(--accent); font-weight:900; text-decoration: underline; text-underline-offset:3px; }

    @media (prefers-reduced-motion: reduce){
      .quickContactModal,
      .quickContactBackdrop,
      .quickContactPanel,
      .quickContactCard,
      .quickContactLink,
      .quickContactCopyBtn,
      .quickContactNotice,
      .modal,
      .backdrop,
      .sheet{
        transition: none !important;
      }
    }

    .reveal{ opacity:0; transform: translateY(8px); transition: .34s cubic-bezier(.2,.8,.2,1); }
    #site.reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
    #site.hero-paint-fix{
      outline:1px solid transparent;
      filter:saturate(1);
    }
    #site.hero-paint-fix .heroBanner,
    #site.hero-paint-fix .tentacles,
    #site.hero-paint-fix .heroInner,
    #site.hero-paint-fix .heroGrid,
    #site.hero-paint-fix .heroGrid > div,
    #site.hero-paint-fix .heroGrid .card,
    #site.hero-paint-fix h1,
    #site.hero-paint-fix .heroLead{
      outline:1px solid transparent;
    }
    .sectionFlash{
      position:relative;
      scroll-margin-top: 112px;
      --sf-left:-16px;
      --sf-right:-16px;
      --sf-top:-14px;
      --sf-bottom:-14px;
      --sf-radius:40px;
      --sf-blur:18px;
      --sf-scale-off:.992;
      --sf-bg-main-a:.10;
      --sf-bg-side-a:.06;
      --sf-bg-soft-a:.04;
      --sf-bg-main-a-dark:.14;
      --sf-bg-side-a-dark:.09;
      --sf-bg-soft-a-dark:.06;
      --sf-sh1-r:84px;
      --sf-sh1-s:12px;
      --sf-sh2-r:190px;
      --sf-sh2-s:40px;
      --sf-sh3-r:380px;
      --sf-sh3-s:94px;
      --sf-sh1-r-on:84px;
      --sf-sh1-s-on:14px;
      --sf-sh2-r-on:186px;
      --sf-sh2-s-on:38px;
      --sf-sh3-r-on:360px;
      --sf-sh3-s-on:84px;
      --sf-ring-a:0;
      --sf-sh1-a:0;
      --sf-sh2-a:0;
      --sf-sh3-a:0;
      --sf-ring-a-on:.10;
      --sf-sh1-a-on:.16;
      --sf-sh2-a-on:.12;
      --sf-sh3-a-on:.08;
      --sf-ring-a-on-dark:.13;
      --sf-sh1-a-on-dark:.24;
      --sf-sh2-a-on-dark:.17;
      --sf-sh3-a-on-dark:.12;
    }
    #miniAudit.sectionFlash{
      --sf-left:-8px;
      --sf-right:-8px;
      --sf-top:42px;
      --sf-bottom:-10px;
      --sf-radius:30px;
      --sf-blur:16px;
      --sf-scale-off:.996;
    }
    #contact.sectionFlash{
      --sf-left:-8px;
      --sf-right:-8px;
      --sf-top:42px;
      --sf-bottom:50px;
      --sf-radius:32px;
      --sf-blur:17px;
      --sf-scale-off:.996;
    }
    #about.sectionFlash{
      --sf-left:-34px;
      --sf-right:-34px;
      --sf-top:-8px;
      --sf-bottom:-10px;
      --sf-radius:62px;
      --sf-blur:26px;
      --sf-scale-off:.994;
      --sf-bg-main-a:.14;
      --sf-bg-side-a:.09;
      --sf-bg-soft-a:.06;
      --sf-bg-main-a-dark:.18;
      --sf-bg-side-a-dark:.12;
      --sf-bg-soft-a-dark:.08;
      --sf-ring-a-on:.03;
      --sf-sh1-a-on:.13;
      --sf-sh2-a-on:.10;
      --sf-sh3-a-on:.07;
      --sf-ring-a-on-dark:.05;
      --sf-sh1-a-on-dark:.18;
      --sf-sh2-a-on-dark:.14;
      --sf-sh3-a-on-dark:.10;
    }
    #about.sectionFlash::before{
      display:none;
    }
    #about.sectionFlash::after{
      content:"";
      position:absolute;
      left:-22px;
      right:-22px;
      top:0;
      bottom:-16px;
      pointer-events:none;
      z-index:0;
      opacity:0;
      transform: scale(.994);
      filter: blur(24px);
      transition:
        opacity 1.65s cubic-bezier(.16,.84,.22,1),
        transform 1.35s cubic-bezier(.16,.84,.22,1),
        filter 1.65s cubic-bezier(.16,.84,.22,1);
      will-change: opacity, transform, filter;
      background:
        radial-gradient(82% 28% at 30% 18%, rgba(129,216,208,.24), transparent 80%),
        radial-gradient(72% 24% at 32% 30%, rgba(129,216,208,.18), transparent 82%),
        radial-gradient(26% 46% at 12.5% 77%, rgba(129,216,208,.23), rgba(129,216,208,.12) 42%, transparent 80%),
        radial-gradient(26% 46% at 37.5% 77%, rgba(129,216,208,.25), rgba(129,216,208,.13) 42%, transparent 80%),
        radial-gradient(26% 46% at 62.5% 77%, rgba(129,216,208,.23), rgba(129,216,208,.12) 42%, transparent 80%),
        radial-gradient(26% 46% at 87.5% 77%, rgba(129,216,208,.23), rgba(129,216,208,.12) 42%, transparent 80%),
        radial-gradient(116% 76% at 50% 72%, rgba(129,216,208,.12), transparent 86%);
    }
    #about.sectionFlash.is-on::after{
      opacity:1;
      transform: scale(1);
      filter: blur(34px);
      transition:
        opacity .24s cubic-bezier(.12,.78,.2,1),
        transform .24s cubic-bezier(.12,.78,.2,1),
        filter .24s cubic-bezier(.12,.78,.2,1);
    }
    html.dark #about.sectionFlash::after{
      background:
        radial-gradient(82% 28% at 30% 18%, rgba(129,216,208,.34), transparent 80%),
        radial-gradient(72% 24% at 32% 30%, rgba(129,216,208,.26), transparent 82%),
        radial-gradient(26% 46% at 12.5% 77%, rgba(129,216,208,.34), rgba(129,216,208,.17) 42%, transparent 80%),
        radial-gradient(26% 46% at 37.5% 77%, rgba(129,216,208,.38), rgba(129,216,208,.19) 42%, transparent 80%),
        radial-gradient(26% 46% at 62.5% 77%, rgba(129,216,208,.34), rgba(129,216,208,.17) 42%, transparent 80%),
        radial-gradient(26% 46% at 87.5% 77%, rgba(129,216,208,.34), rgba(129,216,208,.17) 42%, transparent 80%),
        radial-gradient(116% 76% at 50% 72%, rgba(129,216,208,.18), transparent 86%);
    }
    #portfolio.sectionFlash{
      --sf-left:-26px;
      --sf-right:-26px;
      --sf-top:6px;
      --sf-bottom:-10px;
      --sf-radius:44px;
      --sf-blur:22px;
      --sf-scale-off:.994;
      --sf-bg-main-a:.12;
      --sf-bg-side-a:.07;
      --sf-bg-soft-a:.05;
      --sf-bg-main-a-dark:.16;
      --sf-bg-side-a-dark:.10;
      --sf-bg-soft-a-dark:.07;
      --sf-ring-a-on:.03;
      --sf-sh1-a-on:.12;
      --sf-sh2-a-on:.09;
      --sf-sh3-a-on:.06;
      --sf-ring-a-on-dark:.05;
      --sf-sh1-a-on-dark:.17;
      --sf-sh2-a-on-dark:.13;
      --sf-sh3-a-on-dark:.09;
    }
    /* Portfolio uses split glow: heading/filters + grid (no full rectangular overlay on text) */
    #portfolio.sectionFlash::before,
    #portfolio.sectionFlash::after{
      display:none;
    }
    #portfolio .portfolioTop,
    #portfolio #portfolioGrid{
      position:relative;
      z-index:1;
    }
    #portfolio .portfolioTop > *,
    #portfolio #portfolioGrid > *{
      position:relative;
      z-index:1;
    }
    #portfolio .portfolioTop::before,
    #portfolio #portfolioGrid::before{
      content:"";
      position:absolute;
      pointer-events:none;
      z-index:0;
      opacity:0;
      transform: scale(.993);
      filter: blur(22px);
      transition:
        opacity 1.65s cubic-bezier(.16,.84,.22,1),
        transform 1.35s cubic-bezier(.16,.84,.22,1),
        filter 1.65s cubic-bezier(.16,.84,.22,1);
      will-change: opacity, transform, filter;
    }
    #portfolio .portfolioTop::before{
      inset:-10px -16px -8px -12px;
      background:
        radial-gradient(42% 120% at 11% 34%, rgba(129,216,208,.22), rgba(129,216,208,.10) 42%, transparent 80%),
        radial-gradient(54% 120% at 78% 62%, rgba(129,216,208,.18), rgba(129,216,208,.08) 40%, transparent 84%),
        radial-gradient(110% 120% at 50% 62%, rgba(129,216,208,.08), transparent 86%);
    }
    #portfolio #portfolioGrid::before{
      inset:-10px -14px -16px -14px;
      background:
        radial-gradient(42% 76% at 16% 48%, rgba(129,216,208,.20), rgba(129,216,208,.10) 42%, transparent 82%),
        radial-gradient(42% 76% at 50% 48%, rgba(129,216,208,.22), rgba(129,216,208,.11) 42%, transparent 82%),
        radial-gradient(42% 76% at 84% 48%, rgba(129,216,208,.20), rgba(129,216,208,.10) 42%, transparent 82%),
        radial-gradient(116% 88% at 50% 58%, rgba(129,216,208,.10), transparent 88%);
    }
    #portfolio.sectionFlash.is-on .portfolioTop::before,
    #portfolio.sectionFlash.is-on #portfolioGrid::before{
      opacity:1;
      transform: scale(1);
      filter: blur(30px);
      transition:
        opacity .24s cubic-bezier(.12,.78,.2,1),
        transform .24s cubic-bezier(.12,.78,.2,1),
        filter .24s cubic-bezier(.12,.78,.2,1);
    }
    html.dark #portfolio .portfolioTop::before{
      background:
        radial-gradient(42% 120% at 11% 34%, rgba(129,216,208,.34), rgba(129,216,208,.15) 42%, transparent 80%),
        radial-gradient(54% 120% at 78% 62%, rgba(129,216,208,.28), rgba(129,216,208,.12) 40%, transparent 84%),
        radial-gradient(110% 120% at 50% 62%, rgba(129,216,208,.13), transparent 86%);
    }
    html.dark #portfolio #portfolioGrid::before{
      background:
        radial-gradient(42% 76% at 16% 48%, rgba(129,216,208,.32), rgba(129,216,208,.15) 42%, transparent 82%),
        radial-gradient(42% 76% at 50% 48%, rgba(129,216,208,.36), rgba(129,216,208,.17) 42%, transparent 82%),
        radial-gradient(42% 76% at 84% 48%, rgba(129,216,208,.32), rgba(129,216,208,.15) 42%, transparent 82%),
        radial-gradient(116% 88% at 50% 58%, rgba(129,216,208,.15), transparent 88%);
    }
    #services.sectionFlash{
      --sf-left:-12px;
      --sf-right:-12px;
      --sf-top:36px;
      --sf-bottom:-4px;
      --sf-radius:26px;
      --sf-blur:12px;
      --sf-scale-off:.996;
      --sf-bg-main-a:.08;
      --sf-bg-side-a:.04;
      --sf-bg-soft-a:.025;
      --sf-bg-main-a-dark:.11;
      --sf-bg-side-a-dark:.06;
      --sf-bg-soft-a-dark:.04;
      --sf-sh1-r:46px;
      --sf-sh1-s:6px;
      --sf-sh2-r:104px;
      --sf-sh2-s:16px;
      --sf-sh3-r:200px;
      --sf-sh3-s:36px;
      --sf-sh1-r-on:50px;
      --sf-sh1-s-on:8px;
      --sf-sh2-r-on:112px;
      --sf-sh2-s-on:18px;
      --sf-sh3-r-on:214px;
      --sf-sh3-s-on:40px;
      --sf-ring-a-on:.025;
      --sf-sh1-a-on:.09;
      --sf-sh2-a-on:.06;
      --sf-sh3-a-on:.04;
      --sf-ring-a-on-dark:.04;
      --sf-sh1-a-on-dark:.13;
      --sf-sh2-a-on-dark:.09;
      --sf-sh3-a-on-dark:.06;
    }
    #process.sectionFlash{
      --sf-left:-12px;
      --sf-right:-12px;
      --sf-top:34px;
      --sf-bottom:-4px;
      --sf-radius:28px;
      --sf-blur:13px;
      --sf-scale-off:.996;
      --sf-bg-main-a:.09;
      --sf-bg-side-a:.045;
      --sf-bg-soft-a:.03;
      --sf-bg-main-a-dark:.12;
      --sf-bg-side-a-dark:.07;
      --sf-bg-soft-a-dark:.045;
      --sf-sh1-r:52px;
      --sf-sh1-s:7px;
      --sf-sh2-r:118px;
      --sf-sh2-s:18px;
      --sf-sh3-r:226px;
      --sf-sh3-s:40px;
      --sf-sh1-r-on:56px;
      --sf-sh1-s-on:9px;
      --sf-sh2-r-on:126px;
      --sf-sh2-s-on:20px;
      --sf-sh3-r-on:242px;
      --sf-sh3-s-on:44px;
      --sf-ring-a-on:.025;
      --sf-sh1-a-on:.095;
      --sf-sh2-a-on:.065;
      --sf-sh3-a-on:.045;
      --sf-ring-a-on-dark:.04;
      --sf-sh1-a-on-dark:.14;
      --sf-sh2-a-on-dark:.10;
      --sf-sh3-a-on-dark:.07;
    }
    /* Services + Process use object-shaped glow under their actual inner objects */
    #services.sectionFlash::before,
    #services.sectionFlash::after,
    #process.sectionFlash::before,
    #process.sectionFlash::after{
      display:none;
    }
    #services .servicesTabs::before,
    #process .processFlowFlash{
      content:"";
      position:absolute;
      pointer-events:none;
      z-index:0;
      opacity:0;
      transform: scale(.992);
      filter: blur(30px);
      transition:
        opacity 1.65s cubic-bezier(.16,.84,.22,1),
        transform 1.35s cubic-bezier(.16,.84,.22,1),
        filter 1.65s cubic-bezier(.16,.84,.22,1);
      will-change: opacity, transform, filter;
    }
    #services .servicesTabs::before{
      inset:-18px -22px -22px -22px;
      background:
        radial-gradient(40% 80% at 16.5% 52%, rgba(129,216,208,.38), rgba(129,216,208,.22) 38%, transparent 78%),
        radial-gradient(40% 80% at 50% 52%, rgba(129,216,208,.42), rgba(129,216,208,.24) 38%, transparent 78%),
        radial-gradient(40% 80% at 83.5% 52%, rgba(129,216,208,.38), rgba(129,216,208,.22) 38%, transparent 78%),
        radial-gradient(112% 58% at 50% 58%, rgba(129,216,208,.20), transparent 82%);
    }
    #services .servicesTabs.has-active::before{
      background:
        radial-gradient(94% 84% at 50% 52%, rgba(129,216,208,.48), rgba(129,216,208,.28) 42%, transparent 80%),
        radial-gradient(138% 70% at 50% 64%, rgba(129,216,208,.22), transparent 86%);
    }
    #process .processFlowFlash{
      inset:-16px -22px -22px -22px;
      background:
        radial-gradient(104% 26% at 50% 16%, rgba(129,216,208,.30), transparent 82%),
        radial-gradient(38% 58% at 16.5% 68%, rgba(129,216,208,.38), rgba(129,216,208,.22) 44%, transparent 79%),
        radial-gradient(38% 58% at 50% 68%, rgba(129,216,208,.46), rgba(129,216,208,.26) 44%, transparent 79%),
        radial-gradient(38% 58% at 83.5% 68%, rgba(129,216,208,.38), rgba(129,216,208,.22) 44%, transparent 79%),
        radial-gradient(114% 78% at 50% 74%, rgba(129,216,208,.18), transparent 88%);
    }
    #services.sectionFlash.is-on .servicesTabs::before,
    #process.sectionFlash.is-on .processFlowFlash{
      opacity:1;
      transform: scale(1);
      filter: blur(42px);
      transition:
        opacity .24s cubic-bezier(.12,.78,.2,1),
        transform .24s cubic-bezier(.12,.78,.2,1),
        filter .24s cubic-bezier(.12,.78,.2,1);
    }
    html.dark #services .servicesTabs::before{
      background:
        radial-gradient(40% 80% at 16.5% 52%, rgba(129,216,208,.54), rgba(129,216,208,.30) 38%, transparent 78%),
        radial-gradient(40% 80% at 50% 52%, rgba(129,216,208,.60), rgba(129,216,208,.34) 38%, transparent 78%),
        radial-gradient(40% 80% at 83.5% 52%, rgba(129,216,208,.54), rgba(129,216,208,.30) 38%, transparent 78%),
        radial-gradient(112% 58% at 50% 58%, rgba(129,216,208,.28), transparent 82%);
    }
    html.dark #services .servicesTabs.has-active::before{
      background:
        radial-gradient(94% 84% at 50% 52%, rgba(129,216,208,.68), rgba(129,216,208,.38) 42%, transparent 80%),
        radial-gradient(138% 70% at 50% 64%, rgba(129,216,208,.30), transparent 86%);
    }
    html.dark #process .processFlowFlash{
      background:
        radial-gradient(104% 26% at 50% 16%, rgba(129,216,208,.40), transparent 82%),
        radial-gradient(38% 58% at 16.5% 68%, rgba(129,216,208,.54), rgba(129,216,208,.30) 44%, transparent 79%),
        radial-gradient(38% 58% at 50% 68%, rgba(129,216,208,.66), rgba(129,216,208,.36) 44%, transparent 79%),
        radial-gradient(38% 58% at 83.5% 68%, rgba(129,216,208,.54), rgba(129,216,208,.30) 44%, transparent 79%),
        radial-gradient(114% 78% at 50% 74%, rgba(129,216,208,.24), transparent 88%);
    }
    #portfolioFactsSection.sectionFlash{
      --sf-left:-18px;
      --sf-right:-18px;
      --sf-top:4px;
      --sf-bottom:-10px;
      --sf-radius:28px;
      --sf-blur:20px;
      --sf-scale-off:.995;
      --sf-bg-main-a:.10;
      --sf-bg-side-a:.05;
      --sf-bg-soft-a:.03;
      --sf-bg-main-a-dark:.14;
      --sf-bg-side-a-dark:.08;
      --sf-bg-soft-a-dark:.05;
      --sf-ring-a-on:.04;
      --sf-sh1-a-on:.11;
      --sf-sh2-a-on:.08;
      --sf-sh3-a-on:.05;
      --sf-ring-a-on-dark:.06;
      --sf-sh1-a-on-dark:.16;
      --sf-sh2-a-on-dark:.12;
      --sf-sh3-a-on-dark:.08;
    }
    .sectionFlash::before{
  content:"";
  position:absolute;
  left:var(--sf-left);
  right:var(--sf-right);
  top:var(--sf-top);
  bottom:var(--sf-bottom);
  border-radius:var(--sf-radius);
  background:
    radial-gradient(125% 120% at 50% 50%, rgba(129,216,208,var(--sf-bg-main-a)), transparent 74%),
    radial-gradient(84% 92% at 16% 50%, rgba(129,216,208,var(--sf-bg-side-a)), transparent 78%),
    radial-gradient(84% 92% at 84% 50%, rgba(129,216,208,var(--sf-bg-side-a)), transparent 78%),
    radial-gradient(155% 130% at 50% 50%, rgba(129,216,208,var(--sf-bg-soft-a)), transparent 86%);
  box-shadow:
    0 0 0 1px rgba(129,216,208,var(--sf-ring-a)),
    0 0 var(--sf-sh1-r) var(--sf-sh1-s) rgba(129,216,208,var(--sf-sh1-a)),
    0 0 var(--sf-sh2-r) var(--sf-sh2-s) rgba(129,216,208,var(--sf-sh2-a)),
    0 0 var(--sf-sh3-r) var(--sf-sh3-s) rgba(129,216,208,var(--sf-sh3-a));
  opacity:0;
  transform: scale(var(--sf-scale-off));
  transition:
    opacity 1.65s cubic-bezier(.16,.84,.22,1),
    transform 1.35s cubic-bezier(.16,.84,.22,1),
    box-shadow 1.65s cubic-bezier(.16,.84,.22,1);
  filter: blur(var(--sf-blur));
  will-change: opacity, transform;
  pointer-events:none;
  z-index:0;
}
    .sectionFlash.is-on::before{
  opacity:1;
  transform: scale(1);
  box-shadow:
    0 0 0 1px rgba(129,216,208,var(--sf-ring-a-on)),
    0 0 var(--sf-sh1-r-on) var(--sf-sh1-s-on) rgba(129,216,208,var(--sf-sh1-a-on)),
    0 0 var(--sf-sh2-r-on) var(--sf-sh2-s-on) rgba(129,216,208,var(--sf-sh2-a-on)),
    0 0 var(--sf-sh3-r-on) var(--sf-sh3-s-on) rgba(129,216,208,var(--sf-sh3-a-on));
  transition:
    opacity .24s cubic-bezier(.12,.78,.2,1),
    transform .24s cubic-bezier(.12,.78,.2,1),
    box-shadow .24s cubic-bezier(.12,.78,.2,1);
}
    .sectionFlash > *{ position:relative; z-index:1; }
    html.dark .sectionFlash::before{
  background:
    radial-gradient(125% 120% at 50% 50%, rgba(129,216,208,var(--sf-bg-main-a-dark)), transparent 74%),
    radial-gradient(84% 92% at 16% 50%, rgba(129,216,208,var(--sf-bg-side-a-dark)), transparent 78%),
    radial-gradient(84% 92% at 84% 50%, rgba(129,216,208,var(--sf-bg-side-a-dark)), transparent 78%),
    radial-gradient(155% 130% at 50% 50%, rgba(129,216,208,var(--sf-bg-soft-a-dark)), transparent 86%);
}
    html.dark .sectionFlash.is-on::before{
  box-shadow:
    0 0 0 1px rgba(129,216,208,var(--sf-ring-a-on-dark)),
    0 0 calc(var(--sf-sh1-r-on) + 16px) calc(var(--sf-sh1-s-on) + 6px) rgba(129,216,208,var(--sf-sh1-a-on-dark)),
    0 0 calc(var(--sf-sh2-r-on) + 34px) calc(var(--sf-sh2-s-on) + 10px) rgba(129,216,208,var(--sf-sh2-a-on-dark)),
    0 0 calc(var(--sf-sh3-r-on) + 80px) calc(var(--sf-sh3-s-on) + 22px) rgba(129,216,208,var(--sf-sh3-a-on-dark));
}
    @media (max-width: 820px){
      .sectionFlash{ scroll-margin-top: 96px; }
      #miniAudit.sectionFlash{
        --sf-left:-6px;
        --sf-right:-6px;
        --sf-top:34px;
        --sf-bottom:-8px;
        --sf-radius:22px;
        --sf-blur:14px;
      }
      #contact.sectionFlash{
        --sf-left:-6px;
        --sf-right:-6px;
        --sf-top:34px;
        --sf-bottom:44px;
        --sf-radius:22px;
        --sf-blur:14px;
      }
      #about.sectionFlash{
        --sf-left:-20px;
        --sf-right:-20px;
        --sf-top:-4px;
        --sf-bottom:-6px;
        --sf-radius:34px;
        --sf-blur:20px;
      }
      #about.sectionFlash::after{
        left:-12px;
        right:-12px;
        top:0;
        bottom:-10px;
        filter: blur(18px);
        background:
          radial-gradient(100% 20% at 38% 14%, rgba(129,216,208,.19), transparent 82%),
          radial-gradient(100% 24% at 38% 26%, rgba(129,216,208,.15), transparent 84%),
          radial-gradient(104% 22% at 50% 52%, rgba(129,216,208,.18), transparent 84%),
          radial-gradient(104% 26% at 50% 68%, rgba(129,216,208,.16), transparent 86%),
          radial-gradient(106% 32% at 50% 84%, rgba(129,216,208,.13), transparent 90%);
      }
      html.dark #about.sectionFlash::after{
        background:
          radial-gradient(100% 20% at 38% 14%, rgba(129,216,208,.28), transparent 82%),
          radial-gradient(100% 24% at 38% 26%, rgba(129,216,208,.22), transparent 84%),
          radial-gradient(104% 22% at 50% 52%, rgba(129,216,208,.26), transparent 84%),
          radial-gradient(104% 26% at 50% 68%, rgba(129,216,208,.24), transparent 86%),
          radial-gradient(106% 32% at 50% 84%, rgba(129,216,208,.18), transparent 90%);
      }
      #about.sectionFlash.is-on::after{
        filter: blur(24px);
      }
      #portfolio.sectionFlash{
        --sf-left:-14px;
        --sf-right:-14px;
        --sf-top:4px;
        --sf-bottom:-6px;
        --sf-radius:24px;
        --sf-blur:16px;
      }
      #portfolio .portfolioTop::before{
        inset:-8px -10px -6px -8px;
        filter: blur(16px);
        background:
          radial-gradient(100% 76% at 26% 34%, rgba(129,216,208,.16), transparent 82%),
          radial-gradient(108% 82% at 76% 70%, rgba(129,216,208,.12), transparent 86%);
      }
      #portfolio #portfolioGrid::before{
        inset:-8px -8px -12px -8px;
        filter: blur(20px);
        background:
          radial-gradient(104% 40% at 50% 26%, rgba(129,216,208,.16), transparent 84%),
          radial-gradient(108% 58% at 50% 58%, rgba(129,216,208,.14), transparent 88%);
      }
      html.dark #portfolio .portfolioTop::before{
        background:
          radial-gradient(100% 76% at 26% 34%, rgba(129,216,208,.24), transparent 82%),
          radial-gradient(108% 82% at 76% 70%, rgba(129,216,208,.18), transparent 86%);
      }
      html.dark #portfolio #portfolioGrid::before{
        background:
          radial-gradient(104% 40% at 50% 26%, rgba(129,216,208,.24), transparent 84%),
          radial-gradient(108% 58% at 50% 58%, rgba(129,216,208,.20), transparent 88%);
      }
      #portfolio.sectionFlash.is-on .portfolioTop::before,
      #portfolio.sectionFlash.is-on #portfolioGrid::before{
        filter: blur(24px);
      }
      #services.sectionFlash{
        --sf-left:-8px;
        --sf-right:-8px;
        --sf-top:28px;
        --sf-bottom:-3px;
        --sf-radius:16px;
        --sf-blur:10px;
        --sf-sh1-r:28px;
        --sf-sh1-s:4px;
        --sf-sh2-r:64px;
        --sf-sh2-s:9px;
        --sf-sh3-r:124px;
        --sf-sh3-s:18px;
        --sf-sh1-r-on:30px;
        --sf-sh1-s-on:5px;
        --sf-sh2-r-on:70px;
        --sf-sh2-s-on:10px;
        --sf-sh3-r-on:136px;
        --sf-sh3-s-on:20px;
      }
      #process.sectionFlash{
        --sf-left:-8px;
        --sf-right:-8px;
        --sf-top:26px;
        --sf-bottom:-3px;
        --sf-radius:17px;
        --sf-blur:10px;
        --sf-sh1-r:32px;
        --sf-sh1-s:4px;
        --sf-sh2-r:74px;
        --sf-sh2-s:10px;
        --sf-sh3-r:142px;
        --sf-sh3-s:22px;
        --sf-sh1-r-on:34px;
        --sf-sh1-s-on:5px;
        --sf-sh2-r-on:80px;
        --sf-sh2-s-on:11px;
        --sf-sh3-r-on:154px;
        --sf-sh3-s-on:24px;
      }
      #services .servicesTabs::before{
        inset:-14px -16px -18px -16px;
        filter: blur(22px);
        background:
          radial-gradient(100% 22% at 50% 18%, rgba(129,216,208,.22), transparent 82%),
          radial-gradient(100% 30% at 50% 42%, rgba(129,216,208,.24), transparent 84%),
          radial-gradient(100% 30% at 50% 66%, rgba(129,216,208,.22), transparent 86%),
          radial-gradient(104% 38% at 50% 84%, rgba(129,216,208,.14), transparent 90%);
      }
      #services .servicesTabs.has-active::before{
        background:
          radial-gradient(106% 46% at 50% 48%, rgba(129,216,208,.30), transparent 84%),
          radial-gradient(106% 54% at 50% 78%, rgba(129,216,208,.20), transparent 90%);
      }
      #process .processFlowFlash{
        inset:-12px -16px -18px -16px;
        filter: blur(24px);
        background:
          radial-gradient(102% 22% at 50% 26%, rgba(129,216,208,.28), transparent 82%),
          radial-gradient(102% 34% at 50% 58%, rgba(129,216,208,.24), transparent 86%),
          radial-gradient(104% 40% at 50% 82%, rgba(129,216,208,.17), transparent 90%);
      }
      html.dark #services .servicesTabs::before{
        background:
          radial-gradient(100% 22% at 50% 18%, rgba(129,216,208,.34), transparent 82%),
          radial-gradient(100% 30% at 50% 42%, rgba(129,216,208,.38), transparent 84%),
          radial-gradient(100% 30% at 50% 66%, rgba(129,216,208,.34), transparent 86%),
          radial-gradient(104% 38% at 50% 84%, rgba(129,216,208,.22), transparent 90%);
      }
      html.dark #services .servicesTabs.has-active::before{
        background:
          radial-gradient(106% 46% at 50% 48%, rgba(129,216,208,.44), transparent 84%),
          radial-gradient(106% 54% at 50% 78%, rgba(129,216,208,.28), transparent 90%);
      }
      html.dark #process .processFlowFlash{
        background:
          radial-gradient(102% 22% at 50% 26%, rgba(129,216,208,.42), transparent 82%),
          radial-gradient(102% 34% at 50% 58%, rgba(129,216,208,.36), transparent 86%),
          radial-gradient(104% 40% at 50% 82%, rgba(129,216,208,.24), transparent 90%);
      }
      #services.sectionFlash.is-on .servicesTabs::before,
      #process.sectionFlash.is-on .processFlowFlash{
        filter: blur(30px);
      }
      #portfolioFactsSection.sectionFlash{
        --sf-left:-10px;
        --sf-right:-10px;
        --sf-top:2px;
        --sf-bottom:-6px;
        --sf-radius:20px;
        --sf-blur:16px;
      }
      .brandBlockAnim{ scroll-margin-top: 96px; }
    }
    .reveal.in{ opacity:1; transform: translateY(0); }

    .contactBox{
      border-radius:28px;
      border:1px solid rgba(175,186,202,.28);
      background:
        radial-gradient(1200px 620px at 10% -10%, rgba(129,216,208,.14), transparent 70%),
        radial-gradient(1200px 620px at 90% 110%, rgba(129,216,208,.09), transparent 74%),
        linear-gradient(132deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 36%, rgba(255,255,255,.01) 100%),
        linear-gradient(180deg, rgba(248,250,255,.34) 0%, rgba(244,247,253,.24) 46%, rgba(238,242,250,.16) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 24px 64px rgba(17,12,46,.12),
        0 8px 24px rgba(17,12,46,.06);
      overflow:hidden;
      position:relative;
      padding:18px;
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }
    html.dark .contactBox{
      border-color: rgba(184,194,211,.22);
      background:
        radial-gradient(1200px 620px at 10% -10%, rgba(129,216,208,.16), transparent 70%),
        radial-gradient(1200px 620px at 90% 110%, rgba(129,216,208,.11), transparent 74%),
        linear-gradient(138deg, rgba(238,245,255,.08) 0%, rgba(206,221,240,.03) 34%, rgba(129,216,208,.02) 100%),
        linear-gradient(180deg, rgba(9,12,20,.58) 0%, rgba(8,11,18,.52) 48%, rgba(7,9,15,.62) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 28px 78px rgba(0,0,0,.4),
        0 10px 30px rgba(0,0,0,.3);
    }
    .contactBox::before{
      content:"";
      position:absolute;
      inset:1px 1px auto 1px;
      height:42%;
      border-radius:26px 26px 20px 20px;
      pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
      opacity:.34;
      z-index:0;
    }
    html.dark .contactBox::before{
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
      opacity:.26;
    }
    .contactBox::after{
      content:"";
      position:absolute;
      inset:auto 10% 8px 10%;
      height:16px;
      border-radius:999px;
      background: radial-gradient(closest-side, rgba(7,10,18,.26), transparent 80%);
      filter: blur(7px);
      pointer-events:none;
      z-index:0;
    }
    .contactBg{
      position:absolute; inset:-1px;
      pointer-events:none;
      opacity:.18;
      background-image: var(--logoBanner);
      background-repeat:no-repeat;
      background-size:1060px auto;
      background-position:50% 14%;
      filter: grayscale(1) contrast(1.02) blur(8px);
      mix-blend-mode:soft-light;
      mask-image: radial-gradient(84% 62% at 50% 22%, #000 0%, transparent 76%);
      -webkit-mask-image: radial-gradient(84% 62% at 50% 22%, #000 0%, transparent 76%);
      z-index:0;
    }
    html.dark .contactBg{ opacity:.12; filter: grayscale(1) contrast(1.05) blur(8px); mix-blend-mode:screen; }

    .contactInner{ position:relative; display:grid; gap:14px; z-index:1; }
    .contactPanel{
      border-radius:24px;
      border:1px solid rgba(176,187,202,.26);
      background:
        radial-gradient(720px 320px at 0% 0%, rgba(129,216,208,.1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
      padding:18px;
      box-shadow:none !important;
      position:relative;
      overflow:hidden;
    }
    .contactPanel::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%);
      opacity:.46;
    }
    html.dark .contactPanel{
      border-color: rgba(177,189,208,.2);
      background:
        radial-gradient(720px 320px at 0% 0%, rgba(129,216,208,.12), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    }
    .contactPanel > *{ position:relative; z-index:1; }
    .contactLead{ margin-top:10px; max-width:42ch; }
    .contactHint{
      margin-top:10px;
      font-size:13px;
      color:var(--muted2);
      line-height:1.55;
    }
    .contactActions{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .contactActions .btn{ width:100%; }
    .contactActions .btnPrimary{
      background: rgba(245,248,254,.96);
      color:#0c121d;
      border-color: rgba(198,207,223,.62);
    }
    html.dark .contactActions .btnPrimary{
      background: rgba(236,240,248,.96);
      color:#0b101a;
      border-color: rgba(204,214,230,.56);
    }
    .contactCommunity{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }
    .contactCommunityLabel{
      flex:1 1 250px;
      font-size:12px;
      line-height:1.55;
      color:var(--muted2);
    }
    .contactCommunity .btn{
      min-width:180px;
    }
    .emailRow{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
    .emailInfo{ display:flex; flex-direction:column; gap:4px; }
    .emailLabel{ font-size:12px; font-weight:900; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; }
    .emailValue{ font-weight:900; color:var(--ink); text-decoration:none; }
    .emailValue:hover{ text-decoration:underline; }
    .miniBrief{
      border-radius:24px;
      border:1px solid rgba(176,187,202,.24);
      background:
        radial-gradient(720px 320px at 100% 0%, rgba(129,216,208,.1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
      padding:16px;
      backdrop-filter: blur(14px) saturate(1.08);
      -webkit-backdrop-filter: blur(14px) saturate(1.08);
    }
    html.dark .miniBrief{
      border-color: rgba(177,189,208,.18);
      background:
        radial-gradient(720px 320px at 100% 0%, rgba(129,216,208,.12), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
    }
    .briefText{
      border-radius:18px;
      border:1px solid rgba(176,187,202,.34);
      background: rgba(7,10,17,.15);
      padding:14px;
      color:var(--muted);
      line-height:1.7;
    }
    html.dark .briefText{
      border-color: rgba(177,189,208,.24);
      background: rgba(6,9,15,.24);
    }
    .foot{ margin-top:10px; font-size:12px; color:var(--muted2); }
    html:not(.dark) .contactHint,
    html:not(.dark) .contactCommunityLabel,
    html:not(.dark) .emailLabel,
    html:not(.dark) .foot{
      color:rgba(94,107,126,.9);
    }
    .siteLegalSignature{
      margin:34px auto 8px;
      padding:8px 12px 18px;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      width:min(100%, 760px);
    }
    .siteLegalSignatureTitle{
      font-weight:950;
      letter-spacing:.16em;
      text-transform:uppercase;
      font-size: clamp(20px, 3.2vw, 34px);
      line-height: .95;
      color: var(--ink);
      opacity:.98;
    }
    .siteLegalSignatureText{
      font-size:13px;
      line-height:1.45;
      color: var(--muted2);
      letter-spacing:.01em;
      opacity:.9;
    }
    .siteUpdateHint{
      position:fixed;
      right:clamp(24px, 3.2vw, 52px);
      bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
      z-index:6;
      max-width:min(72vw, 360px);
      text-align:right;
      font-size:13.5px;
      line-height:1.35;
      letter-spacing:.01em;
      color:rgba(114,126,144,.9);
      pointer-events:none;
      user-select:none;
      text-wrap:pretty;
    }
    html.dark .siteLegalSignatureText{
      color: rgba(196,205,219,.76);
    }
    html.dark .siteUpdateHint{
      color:rgba(168,180,198,.58);
    }
    #brand .siteLegalSignature{
      margin:20px auto 0;
      padding:6px 12px 4px;
    }
    @media (max-width: 600px){
      .siteUpdateHint{
        right:clamp(14px, 5vw, 26px);
        bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
        max-width:68vw;
        font-size:12.5px;
      }
    }
    .auditSection{
      margin-top:18px;
    }
    .auditFunnel{
      border-radius:24px;
      border:1px solid rgba(176,187,202,.32);
      background:
        radial-gradient(900px 420px at 0% 0%, rgba(129,216,208,.14), transparent 68%),
        radial-gradient(900px 420px at 100% 110%, rgba(129,216,208,.1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 24px 60px rgba(8,10,16,.2);
      padding:18px;
      backdrop-filter: blur(14px) saturate(1.08);
      -webkit-backdrop-filter: blur(14px) saturate(1.08);
      position:relative;
      overflow:hidden;
    }
    .auditFunnel::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      opacity:.85;
    }
    html.dark .auditFunnel{
      border-color: rgba(177,189,208,.24);
      background:
        radial-gradient(900px 420px at 0% 0%, rgba(129,216,208,.16), transparent 68%),
        radial-gradient(900px 420px at 100% 110%, rgba(129,216,208,.12), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 28px 72px rgba(0,0,0,.36);
    }
    .auditGrid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.02fr .98fr;
      gap:14px;
      align-items:start;
    }
    .auditOffer{
      margin:4px 0 0;
      color:var(--ink);
      font-weight:950;
      font-size:clamp(24px, 2.35vw, 33px);
      line-height:1.08;
      letter-spacing:.005em;
      white-space:nowrap;
      text-shadow:0 4px 20px rgba(129,216,208,.2);
    }
    html.dark .auditOffer{
      color: rgba(224,250,246,.96);
      text-shadow:0 6px 24px rgba(129,216,208,.18);
    }
    .auditTitleSub{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:10px;
      color:var(--muted);
      font-size:clamp(14px, 1.35vw, 18px);
      font-weight:800;
      letter-spacing:.02em;
      line-height:1.2;
      text-transform:uppercase;
    }
    html.dark .auditTitleSub{
      color:rgba(235,240,248,.75);
    }
    .auditSection .h2{ margin-top:4px; }
    .auditSub{
      margin-top:10px;
      max-width:54ch;
    }
    .auditSubStrong{
      color:var(--ink);
      font-weight:900;
      letter-spacing:.01em;
      text-shadow: 0 2px 14px rgba(129,216,208,.22);
    }
    html.dark .auditSubStrong{
      color: rgba(224,250,246,.96);
    }
    .auditPoints{
      margin-top:12px;
      display:grid;
      gap:8px;
    }
    .auditPoint{
      border-radius:12px;
      border:1px solid rgba(172,183,199,.26);
      background: rgba(255,255,255,.05);
      padding:9px 11px;
      font-size:13px;
      color:var(--muted);
      line-height:1.5;
    }
    html.dark .auditPoint{
      border-color: rgba(176,188,208,.2);
      background: rgba(255,255,255,.03);
    }
    .auditNote{
      margin-top:10px;
      color:var(--muted2);
      font-size:12px;
      line-height:1.5;
      font-weight:800;
    }
    .auditForm{
      border-radius:18px;
      border:1px solid rgba(176,187,202,.28);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      padding:14px;
    }
    html.dark .auditForm{
      border-color: rgba(177,189,208,.22);
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
    }
    .auditLabel{
      display:block;
      margin-top:10px;
      font-size:12px;
      color:var(--muted2);
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .auditLabel:first-child{ margin-top:0; }
    .auditInput,
    .auditTextarea{
      width:100%;
      margin-top:6px;
      border-radius:12px;
      border:1px solid rgba(172,183,199,.3);
      background: rgba(5,8,14,.18);
      color:var(--ink);
      font:inherit;
      padding:11px 12px;
      outline:none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .auditInput::placeholder,
    .auditTextarea::placeholder{
      color:var(--muted2);
      opacity:.78;
    }
    .auditInput:focus,
    .auditTextarea:focus{
      border-color: rgba(129,216,208,.72);
      box-shadow: 0 0 0 4px rgba(129,216,208,.14);
      background: rgba(5,8,14,.24);
    }
    .auditTextarea{
      min-height:86px;
      resize:vertical;
      line-height:1.55;
    }
    .auditSubmit{
      margin-top:12px;
      width:100%;
      font-size:14px;
      font-weight:900;
    }
    .auditSubmit:disabled{
      opacity:.72;
      cursor:wait;
      transform:none;
      box-shadow:none;
    }
    .auditStatus{
      margin-top:8px;
      font-size:12px;
      color:var(--muted2);
      line-height:1.5;
      min-height:18px;
    }
    .auditTrap{
      position:absolute !important;
      left:-9999px !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
    }
    .auditStatus.is-error{
      color: rgba(255,173,173,.95);
    }
    .auditStatus.is-success{
      color: rgba(129,216,208,.95);
    }
    @media (max-width: 980px){
      .auditGrid{ grid-template-columns:1fr; }
    }
    @media (max-width: 600px){
      .auditFunnel{ padding:14px; }
      .auditForm{ padding:12px; }
      .auditOffer{
        white-space:normal;
        font-size:clamp(27px, 8vw, 36px);
      }
      .auditTitleSub{ font-size:14px; }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .reveal{ transition:none; transform:none; opacity:1; }
      .btn, .card, .work{ transition:none; }
      .btn:hover, .card:hover, .work:hover{ transform:none; }
      .factsToggle, .portfolioFactsPanel{ transition:none !important; }
      .processFlow::before, .processFlow::after, .processFlow .processCard::after, .processLine path{ transition:none; }
      #about .aboutHeadline .aboutWord,
      #about .sub,
      #about .aboutGrid .card{
        animation:none !important;
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
      }
      #about .aboutHeadline.underline::after{
        animation:none !important;
        transform:none !important;
        opacity:.95 !important;
      }
    }

    @media (min-width: 700px) and (max-width: 819px){
      .heroGrid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
      .kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .gridWork{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .contactInner{ grid-template-columns: 1.1fr .9fr; gap:16px; padding:12px; }
      .contactBox{ padding:22px; }
      .serviceCardParallax{
        --service-media-size: clamp(150px, 24vw, 180px);
        --service-media-overhang: 14px;
      }
    }

    @media (min-width: 820px){
      .links{
        display:flex;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        z-index:2;
      }
      .nav{ min-height:84px; }
      .heroInner{ padding:58px 40px; }
      h1{ font-size:62px; }
      .heroLead{ font-size:18px; }
      .heroGrid{ grid-template-columns: 1.3fr .9fr; align-items:start; }
      .kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .aboutGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .filters{ display:flex; overflow-x:visible; padding-bottom:0; }
      .gridWork{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .factsGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      .contactInner{ grid-template-columns: 1.1fr .9fr; gap:16px; padding:12px; }
      .contactBox{ padding:22px; }
    }
    @media (min-width: 1240px){
      .aboutGrid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (min-width: 820px) and (max-width: 1100px){
      .nav{
        min-height:72px;
        padding:10px 12px;
      }
      .links{
        gap:18px;
        font-size:12px;
        margin-left:0;
      }
      .actions{ gap:8px; }
      body[data-mode] .backBtn{
        margin-right:8px;
        padding:9px 14px;
      }
      .servicesGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
      .serviceCard{ padding-right:128px; }
      .serviceCardParallax > :not(.serviceMedia){ max-width:64%; }
      .serviceMedia.shoot{ width:200px; height:200px; right:-22px; bottom:-18px; }
      .serviceMedia.edit{ width:180px; height:180px; right:-18px; bottom:-16px; }
      .serviceMedia.post{ width:190px; height:190px; right:-20px; bottom:-18px; }
    }

    @media (max-width: 700px){
      .modalMedia.vertical{ max-height: 52vh; }
      .contactActions{ grid-template-columns: 1fr; }
      .contactPanel{ padding:16px; }
      .miniBrief{ padding:14px; }
    }

    @media (max-width: 1024px){
      .container{ padding:0 14px; }
      .heroInner{ padding:34px 16px 30px; }
      h1{ font-size:clamp(38px, 7.2vw, 56px); }
      .heroLead{ font-size:16px; line-height:1.55; }
      .sheet{ width:min(920px, calc(100% - 12px)); }
    }

    @media (max-width: 760px){
      header{ top:8px; }
      body[data-choice="true"] header{ top:34px; }
      main{ padding-top:12px; }
      section{ padding-top:46px; }

      .nav{ padding:6px 8px; gap:4px; }
      .brand{ min-width:0; gap:6px; }
      .brandTitle{
        display:block;
        font-size:10px;
        max-width:58px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .mark{
        --nav-logo-scale: 1.58;
        width:70px; height:47px;
      }
      .actions{ gap:4px; }
      .nav .iconBtn{ width:30px; height:30px; }
      body[data-mode] .backBtn{ margin-right:2px; }

      #choiceBack{
        min-width:58px;
        padding:6px 8px;
        font-size:10px;
        line-height:1;
        white-space:nowrap;
      }
      #headerContactBtn{
        min-width:76px;
        padding:6px 8px;
        font-size:10px;
        line-height:1;
        white-space:nowrap;
      }

      .langSwitch{ padding:1px; gap:1px; }
      .langBtn{ padding:3px 6px; font-size:9px; }

      .heroInner{ padding:24px 10px 26px; }
      h1{ font-size:clamp(32px, 10vw, 44px); }
      .heroLead{ font-size:14px; line-height:1.5; }
      #services .h2{
        font-size:clamp(34px, 8.8vw, 44px);
        line-height:1.02;
        letter-spacing:-0.035em;
      }
      #services .sub{
        margin-top:10px !important;
        max-width:34ch;
        font-size:15px;
        line-height:1.52;
      }

      .grid3, .gridWork, .factsGrid{ grid-template-columns:1fr; }
      .portfolioTop{ gap:12px; }
      .filters{
        overflow-x:auto;
        white-space:nowrap;
        padding-bottom:6px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .filters::-webkit-scrollbar{ display:none; }
      .chip{ flex:0 0 auto; }

      .auditOffer{
        white-space:normal;
        font-size:clamp(24px, 8vw, 34px);
        line-height:1.08;
      }
      .auditTitleSub{ font-size:13px; margin-top:6px; }
      .auditSub{ max-width:none; }
      .auditPoint{ font-size:12.5px; padding:8px 10px; }
      .auditLabel{ font-size:11px; }
      .auditInput, .auditTextarea{ font-size:16px; }
      .auditSubmit{ font-size:13px; padding:12px 14px; }

      .factWork{ font-size:13px; line-height:1.4; }
      .factText{ font-size:12.5px; line-height:1.55; }
      .factLabel{ font-size:10px; letter-spacing:.08em; }

      .serviceCardParallax{ column-gap:10px; }
      .contactBox{ padding:14px; }
      .contactInner{ gap:10px; padding:0; }
    }

    @media (max-width: 390px){
      .container{ padding:0 10px; }
      .nav{ padding:5px 6px; }
      .brand{ min-width:0; }
      .mark{
        --nav-logo-scale: 1.52;
        width:62px; height:41px;
      }
      .brandTitle{ max-width:52px; font-size:9px; }
      #choiceBack{ min-width:50px; padding:5px 6px; font-size:9px; }
      #headerContactBtn{ min-width:64px; padding:5px 6px; font-size:9px; }
      .langBtn{ padding:2px 5px; font-size:8px; }
      .nav .iconBtn{ width:28px; height:28px; }

      h1{ font-size:clamp(28px, 10vw, 38px); }
      .h2{ font-size:24px; }
      .auditOffer{ font-size:clamp(22px, 9vw, 30px); }
      .auditInput, .auditTextarea{ padding:10px 10px; }
      #services .h2{ font-size:32px; }
      #services .sub{ font-size:14px; line-height:1.5; }

      .serviceCardParallax{
        --service-media-size: clamp(122px, 36vw, 142px);
        padding:10px calc(var(--service-media-size) + 6px) 10px 10px;
      }
      .serviceCardParallax .serviceMedia,
      .serviceMedia.shoot,
      .serviceMedia.edit,
      .serviceMedia.post{ right:3px; }
      .serviceCardShoot .serviceMedia.shoot{ right:-2px; }
      .servicesTabsList{ gap:7px; }
      .serviceCardParallax .cardTitle{ font-size:15px; }
      .serviceCardParallax .cardText{ font-size:12.4px; line-height:1.35; }
    }

    @media (max-height: 700px) and (orientation: landscape){
      section{ padding-top:38px; }
      .heroInner{ padding:18px 10px 20px; }
      .heroGrid{ gap:10px; }
      .aboutArrow{ display:none; }
    }

    /* Brand color refresh: brighter, colder cyan-blue (less green/tiffany) */
    body[data-page-mode="brand"],
    body[data-mode="brand"]{
      --brand-cyan-rgb: 102,225,255;
      --brand-cyan-strong-rgb: 86,198,255;
      --brand-cyan-soft-rgb: 170,240,255;
      --brand-cube-rgb: 132,232,244;
    }
    @media (max-width: 1120px){
      body[data-page-mode="brand"],
      body[data-mode="brand"]{
        overflow-x:hidden;
        overflow-x:clip;
        overscroll-behavior-x:none;
        touch-action:pan-y;
      }
      body[data-page-mode="brand"] main,
      body[data-mode="brand"] main{
        overflow-x:hidden;
        overflow-x:clip;
      }
    }
    body.is-b2g-page{
      overflow-x:hidden;
      overflow-x:clip;
      overscroll-behavior-x:none;
      touch-action:pan-y;
    }
    body.is-b2g-page main{
      overflow-x:hidden;
      overflow-x:clip;
    }
    body[data-page-mode="brand"]::before,
    body[data-mode="brand"]::before{
      content:"";
      position:fixed;
      inset:-8%;
      pointer-events:none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
        radial-gradient(1300px 720px at 50% -12%, rgba(var(--brand-cyan-rgb), .40), transparent 72%),
        radial-gradient(1600px 880px at 50% 120%, rgba(var(--brand-cyan-rgb), .28), transparent 82%),
        linear-gradient(165deg, rgba(250,250,252,1) 0%, rgba(246,247,251,1) 46%, rgba(241,242,248,1) 100%);
      background-size:140px 140px, 220px 220px, auto, auto, auto;
      background-position:0 0, 90px 140px, center, center, center;
      background-blend-mode: soft-light, soft-light, normal, normal, normal;
      filter: blur(1px) saturate(1.2) brightness(1.04);
      transform: translateZ(0) scale(1.02);
      z-index:0;
    }
    html.dark body[data-page-mode="brand"]::before,
    html.dark body[data-mode="brand"]::before{
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
        radial-gradient(1300px 720px at 50% -12%, rgba(var(--brand-cyan-rgb), .38), transparent 72%),
        radial-gradient(1600px 880px at 50% 120%, rgba(var(--brand-cyan-rgb), .26), transparent 82%),
        linear-gradient(165deg, rgba(12,12,18,1) 0%, rgba(10,10,16,1) 52%, rgba(9,9,14,1) 100%);
      filter: blur(1px) saturate(1.3) brightness(1.1);
    }
    html.dark body[data-page-mode="brand"],
    html.dark body[data-mode="brand"]{
      --brand-cube-rgb: 108,228,242;
    }

    body[data-page-mode="brand"] .brandTentacles,
    body[data-mode="brand"] .brandTentacles{
      filter: blur(.12px) saturate(1.38) hue-rotate(10deg) brightness(1.1);
    }
    html.dark body[data-page-mode="brand"] .brandTentacles,
    html.dark body[data-mode="brand"] .brandTentacles{
      filter: blur(.08px) saturate(1.5) hue-rotate(12deg) brightness(1.16);
    }

    body[data-page-mode="brand"] .brandIntro,
    body[data-mode="brand"] .brandIntro{
      background:
        radial-gradient(120% 90% at 50% -8%, rgba(var(--brand-cyan-rgb), .34), transparent 72%),
        radial-gradient(120% 120% at 50% 110%, rgba(var(--brand-cyan-rgb), .18), transparent 78%),
        linear-gradient(180deg, rgba(250,250,252,.84), rgba(244,246,251,.9));
    }
    html.dark body[data-page-mode="brand"] .brandIntro,
    html.dark body[data-mode="brand"] .brandIntro{
      background:
        radial-gradient(120% 90% at 50% -8%, rgba(var(--brand-cyan-rgb), .34), transparent 72%),
        radial-gradient(120% 120% at 50% 110%, rgba(var(--brand-cyan-rgb), .16), transparent 78%),
        linear-gradient(180deg, rgba(11,11,16,.86), rgba(9,10,15,.94));
    }
    body[data-page-mode="brand"] .brandIntro.is-pointer-active,
    body[data-mode="brand"] .brandIntro.is-pointer-active{
      border-color: rgba(var(--brand-cyan-rgb), .66);
    }
    body[data-page-mode="brand"] .brandIntro::before,
    body[data-mode="brand"] .brandIntro::before{
      background:
        radial-gradient(420px 180px at 14% 20%, rgba(var(--brand-cyan-rgb), .34), transparent 72%),
        radial-gradient(460px 200px at 86% 78%, rgba(var(--brand-cyan-rgb), .22), transparent 72%);
    }
    body[data-page-mode="brand"] .brandIntroGlass,
    body[data-mode="brand"] .brandIntroGlass{
      background:
        radial-gradient(360px 220px at var(--brand-intro-light-x) var(--brand-intro-light-y), rgba(255,255,255,.24), rgba(var(--brand-cyan-soft-rgb), .26) 35%, rgba(var(--brand-cyan-rgb), 0) 72%),
        radial-gradient(520px 280px at calc(var(--brand-intro-light-x) + 8%) calc(var(--brand-intro-light-y) + 10%), rgba(var(--brand-cyan-rgb), .18), rgba(var(--brand-cyan-rgb), 0) 74%);
    }
    html.dark body[data-page-mode="brand"] .brandIntroGlass,
    html.dark body[data-mode="brand"] .brandIntroGlass{
      background:
        radial-gradient(380px 230px at var(--brand-intro-light-x) var(--brand-intro-light-y), rgba(var(--brand-cyan-soft-rgb), .24), rgba(var(--brand-cyan-rgb), .24) 34%, rgba(var(--brand-cyan-rgb),0) 72%),
        radial-gradient(560px 300px at calc(var(--brand-intro-light-x) + 10%) calc(var(--brand-intro-light-y) + 10%), rgba(var(--brand-cyan-rgb), .14), rgba(var(--brand-cyan-rgb),0) 74%);
    }
    body[data-page-mode="brand"] .brandIntroShape,
    body[data-mode="brand"] .brandIntroShape{
      border-color: rgba(var(--brand-cyan-rgb), .48);
      background: radial-gradient(120% 100% at 28% 20%, rgba(var(--brand-cyan-rgb), .26), rgba(var(--brand-cyan-rgb), .08) 60%, transparent);
    }
    body[data-page-mode="brand"] .brandIntroGlow,
    body[data-mode="brand"] .brandIntroGlow{
      background: radial-gradient(circle at center, rgba(var(--brand-cyan-strong-rgb), .42) 0%, rgba(var(--brand-cyan-rgb), .16) 45%, rgba(var(--brand-cyan-rgb),0) 74%);
    }
    body[data-page-mode="brand"] .brandBusiness,
    body[data-mode="brand"] .brandBusiness{
      background:
        radial-gradient(880px 360px at 100% 0%, rgba(var(--brand-cyan-rgb), .16), transparent 72%),
        var(--paperGlass);
    }
    body[data-page-mode="brand"] .brandBlockAnim.is-on,
    body[data-mode="brand"] .brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .22),
        0 0 112px 22px rgba(var(--brand-cyan-rgb), .28),
        0 0 236px 56px rgba(var(--brand-cyan-rgb), .20),
        0 0 430px 102px rgba(var(--brand-cyan-rgb), .15);
    }
    html.dark body[data-page-mode="brand"] .brandBlockAnim.is-on,
    html.dark body[data-mode="brand"] .brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .17),
        0 0 108px 22px rgba(var(--brand-cyan-rgb), .28),
        0 0 236px 52px rgba(var(--brand-cyan-rgb), .21),
        0 0 456px 116px rgba(var(--brand-cyan-rgb), .15);
    }
    html.dark body[data-page-mode="brand"] .brandBusiness,
    html.dark body[data-mode="brand"] .brandBusiness{
      background:
        radial-gradient(880px 360px at 100% 0%, rgba(var(--brand-cyan-rgb), .22), transparent 72%),
        var(--paperGlass);
    }
    body[data-page-mode="brand"] .brandHow,
    body[data-mode="brand"] .brandHow{
      background:
        radial-gradient(760px 320px at 12% 0%, rgba(var(--brand-cyan-rgb), .14), transparent 72%),
        radial-gradient(760px 320px at 100% 100%, rgba(var(--brand-cyan-rgb), .10), transparent 76%),
        var(--paperGlass);
    }
    html.dark body[data-page-mode="brand"] .brandHow,
    html.dark body[data-mode="brand"] .brandHow{
      background:
        radial-gradient(760px 320px at 12% 0%, rgba(var(--brand-cyan-rgb), .20), transparent 72%),
        radial-gradient(760px 320px at 100% 100%, rgba(var(--brand-cyan-rgb), .14), transparent 76%),
        var(--paperGlass);
    }
    body[data-page-mode="brand"] .brandHow.brandBlockAnim.is-on,
    body[data-mode="brand"] .brandHow.brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .22),
        0 0 116px 22px rgba(var(--brand-cyan-rgb), .30),
        0 0 246px 58px rgba(var(--brand-cyan-rgb), .19),
        0 0 432px 104px rgba(var(--brand-cyan-rgb), .14),
        0 20px 54px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.18);
    }
    html.dark body[data-page-mode="brand"] .brandHow.brandBlockAnim.is-on,
    html.dark body[data-mode="brand"] .brandHow.brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .18),
        0 0 110px 22px rgba(var(--brand-cyan-rgb), .30),
        0 0 238px 54px rgba(var(--brand-cyan-rgb), .22),
        0 0 460px 118px rgba(var(--brand-cyan-rgb), .14),
        0 22px 60px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
    body[data-page-mode="brand"] .brandPortfolio,
    body[data-mode="brand"] .brandPortfolio{
      background:
        radial-gradient(720px 300px at 100% 0%, rgba(var(--brand-cyan-rgb), .16), transparent 72%),
        var(--paperGlass);
    }
    html.dark body[data-page-mode="brand"] .brandPortfolio,
    html.dark body[data-mode="brand"] .brandPortfolio{
      background:
        radial-gradient(720px 300px at 100% 0%, rgba(var(--brand-cyan-rgb), .22), transparent 72%),
        var(--paperGlass);
    }
    html:not(.dark) body[data-page-mode="brand"] #brand-services,
    html:not(.dark) body[data-page-mode="brand"] #brand-how,
    html:not(.dark) body[data-page-mode="brand"] #brand-portfolio,
    html:not(.dark) body[data-page-mode="brand"] #brand-funnel,
    html:not(.dark) body[data-page-mode="brand"] #brand-contact,
    html:not(.dark) body[data-mode="brand"] #brand-services,
    html:not(.dark) body[data-mode="brand"] #brand-how,
    html:not(.dark) body[data-mode="brand"] #brand-portfolio,
    html:not(.dark) body[data-mode="brand"] #brand-funnel,
    html:not(.dark) body[data-mode="brand"] #brand-contact{
      contain: layout;
    }
    html:not(.dark) body[data-page-mode="brand"] .brandBlockAnim.is-on,
    html:not(.dark) body[data-mode="brand"] .brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .22),
        0 0 112px 22px rgba(var(--brand-cyan-rgb), .28),
        0 0 236px 56px rgba(var(--brand-cyan-rgb), .20),
        0 0 430px 102px rgba(var(--brand-cyan-rgb), .15),
        0 16px 36px rgba(17,12,46,.09);
    }
    html:not(.dark) body[data-page-mode="brand"] .brandHow.brandBlockAnim.is-on,
    html:not(.dark) body[data-mode="brand"] .brandHow.brandBlockAnim.is-on{
      box-shadow:
        0 0 0 1px rgba(var(--brand-cyan-rgb), .22),
        0 0 116px 22px rgba(var(--brand-cyan-rgb), .30),
        0 0 246px 58px rgba(var(--brand-cyan-rgb), .19),
        0 0 432px 104px rgba(var(--brand-cyan-rgb), .14),
        0 20px 54px rgba(17,12,46,.12),
        inset 0 1px 0 rgba(255,255,255,.16);
    }

    /* Author palette: restore original tiffany tone */
    body[data-page-mode="author"],
    body[data-mode="author"]{
      --author-cyan-rgb: 129,216,208;
      --accent:#81D8D0;
      --accent2:#81D8D0;
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(var(--author-cyan-rgb), .28), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(var(--author-cyan-rgb), .14), transparent 75%),
        linear-gradient(180deg, rgba(250,250,252,.96), rgba(244,245,250,1));
    }
    html.dark body[data-page-mode="author"],
    html.dark body[data-mode="author"]{
      --author-cyan-rgb: 129,216,208;
      --accent:#81D8D0;
      --accent2:#81D8D0;
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(var(--author-cyan-rgb), .30), transparent 70%),
        radial-gradient(1200px 600px at 50% 110%, rgba(var(--author-cyan-rgb), .16), transparent 75%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    body[data-page-mode="author"] .sectionFlash::before,
    body[data-mode="author"] .sectionFlash::before{
      background:
        radial-gradient(125% 120% at 50% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-main-a)), transparent 74%),
        radial-gradient(84% 92% at 16% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-side-a)), transparent 78%),
        radial-gradient(84% 92% at 84% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-side-a)), transparent 78%),
        radial-gradient(155% 130% at 50% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-soft-a)), transparent 86%);
      box-shadow:
        0 0 0 1px rgba(var(--author-cyan-rgb),var(--sf-ring-a)),
        0 0 var(--sf-sh1-r) var(--sf-sh1-s) rgba(var(--author-cyan-rgb),var(--sf-sh1-a)),
        0 0 var(--sf-sh2-r) var(--sf-sh2-s) rgba(var(--author-cyan-rgb),var(--sf-sh2-a)),
        0 0 var(--sf-sh3-r) var(--sf-sh3-s) rgba(var(--author-cyan-rgb),var(--sf-sh3-a));
    }
    body[data-page-mode="author"] .sectionFlash.is-on::before,
    body[data-mode="author"] .sectionFlash.is-on::before{
      box-shadow:
        0 0 0 1px rgba(var(--author-cyan-rgb),var(--sf-ring-a-on)),
        0 0 var(--sf-sh1-r-on) var(--sf-sh1-s-on) rgba(var(--author-cyan-rgb),var(--sf-sh1-a-on)),
        0 0 var(--sf-sh2-r-on) var(--sf-sh2-s-on) rgba(var(--author-cyan-rgb),var(--sf-sh2-a-on)),
        0 0 var(--sf-sh3-r-on) var(--sf-sh3-s-on) rgba(var(--author-cyan-rgb),var(--sf-sh3-a-on));
    }
    html.dark body[data-page-mode="author"] .sectionFlash::before,
    html.dark body[data-mode="author"] .sectionFlash::before{
      background:
        radial-gradient(125% 120% at 50% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-main-a-dark)), transparent 74%),
        radial-gradient(84% 92% at 16% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-side-a-dark)), transparent 78%),
        radial-gradient(84% 92% at 84% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-side-a-dark)), transparent 78%),
        radial-gradient(155% 130% at 50% 50%, rgba(var(--author-cyan-rgb),var(--sf-bg-soft-a-dark)), transparent 86%);
    }
    html.dark body[data-page-mode="author"] .sectionFlash.is-on::before,
    html.dark body[data-mode="author"] .sectionFlash.is-on::before{
      box-shadow:
        0 0 0 1px rgba(var(--author-cyan-rgb),var(--sf-ring-a-on-dark)),
        0 0 calc(var(--sf-sh1-r-on) + 16px) calc(var(--sf-sh1-s-on) + 6px) rgba(var(--author-cyan-rgb),var(--sf-sh1-a-on-dark)),
        0 0 calc(var(--sf-sh2-r-on) + 34px) calc(var(--sf-sh2-s-on) + 10px) rgba(var(--author-cyan-rgb),var(--sf-sh2-a-on-dark)),
        0 0 calc(var(--sf-sh3-r-on) + 80px) calc(var(--sf-sh3-s-on) + 22px) rgba(var(--author-cyan-rgb),var(--sf-sh3-a-on-dark));
    }
    body[data-page-mode="author"] #services .servicesTabs::before,
    body[data-mode="author"] #services .servicesTabs::before{
      background:
        radial-gradient(40% 80% at 16.5% 52%, rgba(var(--author-cyan-rgb),.44), rgba(var(--author-cyan-rgb),.26) 38%, transparent 78%),
        radial-gradient(40% 80% at 50% 52%, rgba(var(--author-cyan-rgb),.48), rgba(var(--author-cyan-rgb),.28) 38%, transparent 78%),
        radial-gradient(40% 80% at 83.5% 52%, rgba(var(--author-cyan-rgb),.44), rgba(var(--author-cyan-rgb),.26) 38%, transparent 78%),
        radial-gradient(112% 58% at 50% 58%, rgba(var(--author-cyan-rgb),.24), transparent 82%);
    }
    body[data-page-mode="author"] #services .servicesTabs.has-active::before,
    body[data-mode="author"] #services .servicesTabs.has-active::before{
      background:
        radial-gradient(94% 84% at 50% 52%, rgba(var(--author-cyan-rgb),.56), rgba(var(--author-cyan-rgb),.34) 42%, transparent 80%),
        radial-gradient(138% 70% at 50% 64%, rgba(var(--author-cyan-rgb),.28), transparent 86%);
    }
    body[data-page-mode="author"] #process .processFlowFlash,
    body[data-mode="author"] #process .processFlowFlash{
      background:
        radial-gradient(104% 26% at 50% 16%, rgba(var(--author-cyan-rgb),.36), transparent 82%),
        radial-gradient(38% 58% at 16.5% 68%, rgba(var(--author-cyan-rgb),.44), rgba(var(--author-cyan-rgb),.26) 44%, transparent 79%),
        radial-gradient(38% 58% at 50% 68%, rgba(var(--author-cyan-rgb),.52), rgba(var(--author-cyan-rgb),.30) 44%, transparent 79%),
        radial-gradient(38% 58% at 83.5% 68%, rgba(var(--author-cyan-rgb),.44), rgba(var(--author-cyan-rgb),.26) 44%, transparent 79%),
        radial-gradient(114% 78% at 50% 74%, rgba(var(--author-cyan-rgb),.22), transparent 88%);
    }
    html.dark body[data-page-mode="author"] #services .servicesTabs::before,
    html.dark body[data-mode="author"] #services .servicesTabs::before{
      background:
        radial-gradient(40% 80% at 16.5% 52%, rgba(var(--author-cyan-rgb),.60), rgba(var(--author-cyan-rgb),.36) 38%, transparent 78%),
        radial-gradient(40% 80% at 50% 52%, rgba(var(--author-cyan-rgb),.66), rgba(var(--author-cyan-rgb),.40) 38%, transparent 78%),
        radial-gradient(40% 80% at 83.5% 52%, rgba(var(--author-cyan-rgb),.60), rgba(var(--author-cyan-rgb),.36) 38%, transparent 78%),
        radial-gradient(112% 58% at 50% 58%, rgba(var(--author-cyan-rgb),.32), transparent 82%);
    }
    html.dark body[data-page-mode="author"] #services .servicesTabs.has-active::before,
    html.dark body[data-mode="author"] #services .servicesTabs.has-active::before{
      background:
        radial-gradient(94% 84% at 50% 52%, rgba(var(--author-cyan-rgb),.74), rgba(var(--author-cyan-rgb),.46) 42%, transparent 80%),
        radial-gradient(138% 70% at 50% 64%, rgba(var(--author-cyan-rgb),.36), transparent 86%);
    }
    html.dark body[data-page-mode="author"] #process .processFlowFlash,
    html.dark body[data-mode="author"] #process .processFlowFlash{
      background:
        radial-gradient(104% 26% at 50% 16%, rgba(var(--author-cyan-rgb),.48), transparent 82%),
        radial-gradient(38% 58% at 16.5% 68%, rgba(var(--author-cyan-rgb),.60), rgba(var(--author-cyan-rgb),.36) 44%, transparent 79%),
        radial-gradient(38% 58% at 50% 68%, rgba(var(--author-cyan-rgb),.72), rgba(var(--author-cyan-rgb),.44) 44%, transparent 79%),
        radial-gradient(38% 58% at 83.5% 68%, rgba(var(--author-cyan-rgb),.60), rgba(var(--author-cyan-rgb),.36) 44%, transparent 79%),
        radial-gradient(114% 78% at 50% 74%, rgba(var(--author-cyan-rgb),.30), transparent 88%);
    }

    .authorHeroWithRail{
      overflow:visible;
    }
    .authorShootRail{
      left:calc(100% + 28px);
      right:auto;
      top:50%;
    }
    .authorShootMobile{
      display:none;
    }

    #shoots-intro.brandBlockAnim{
      opacity:1;
      transform:none;
      filter:none;
      will-change:auto;
    }
    .shootsFlow{
      max-width:1240px;
      margin:24px auto 0;
      display:grid;
      gap:18px;
      position:relative;
      isolation:isolate;
    }
    .shootsFlow::before,
    .shootsFlow::after{
      content:"";
      position:absolute;
      left:50%;
      width:132%;
      pointer-events:none;
      transform:translateX(-50%);
      z-index:0;
      filter:blur(10px);
    }
    .shootsFlow::before{
      top:-150px;
      height:360px;
      background:
        radial-gradient(58% 72% at 50% 18%, rgba(129,216,208,.20), transparent 72%),
        radial-gradient(34% 46% at 18% 30%, rgba(129,216,208,.08), transparent 74%),
        radial-gradient(34% 46% at 82% 30%, rgba(129,216,208,.08), transparent 74%);
      opacity:.82;
    }
    .shootsFlow::after{
      bottom:-170px;
      height:400px;
      background:
        radial-gradient(60% 76% at 50% 82%, rgba(129,216,208,.18), transparent 74%),
        radial-gradient(40% 54% at 22% 74%, rgba(129,216,208,.08), transparent 76%),
        radial-gradient(40% 54% at 78% 74%, rgba(129,216,208,.08), transparent 76%);
      opacity:.72;
    }
    .shootsIntro{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid rgba(129,216,208,.22);
      background:
        linear-gradient(140deg, rgba(6,10,18,.94), rgba(3,7,14,.90)),
        radial-gradient(125% 120% at 0% 0%, rgba(129,216,208,.12), transparent 66%),
        radial-gradient(100% 100% at 100% 0%, rgba(129,216,208,.08), transparent 72%);
      box-shadow:
        inset 0 1px 0 rgba(208,234,244,.08),
        0 24px 72px rgba(0,0,0,.26);
      padding:38px 38px 34px;
    }
    .shootsIntro::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(42% 62% at 20% 24%, rgba(129,216,208,.16), transparent 72%),
        radial-gradient(36% 54% at 84% 20%, rgba(129,216,208,.14), transparent 74%),
        linear-gradient(90deg, rgba(129,216,208,.06), rgba(129,216,208,0) 22%, rgba(129,216,208,.08) 50%, rgba(129,216,208,0) 78%, rgba(129,216,208,.06));
      opacity:.82;
      pointer-events:none;
    }
    .shootsIntroGrid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
      gap:24px;
      align-items:end;
    }
    .shootsEyebrow{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.24);
      background:rgba(11,18,28,.52);
      color:rgba(214,236,244,.74);
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .shootsIntroTitle{
      margin:18px 0 0;
      font-size:clamp(52px, 7.1vw, 92px);
      line-height:.96;
      letter-spacing:-.05em;
      font-weight:950;
      max-width:8.6ch;
    }
    .shootsIntroSub{
      margin:18px 0 0;
      max-width:760px;
      color:rgba(222,232,240,.74);
      font-size:18px;
      line-height:1.7;
    }
    .shootsIntroAside{
      align-self:stretch;
      display:grid;
      gap:12px;
      align-content:end;
      min-height:100%;
      padding:18px 20px;
      border-radius:24px;
      border:1px solid rgba(129,216,208,.18);
      background:
        linear-gradient(180deg, rgba(13,20,31,.78), rgba(9,15,24,.62)),
        radial-gradient(88% 100% at 100% 0%, rgba(129,216,208,.12), transparent 74%);
      box-shadow:
        inset 0 1px 0 rgba(214,236,244,.05),
        0 16px 36px rgba(0,0,0,.18);
    }
    .shootsIntroAsideLabel{
      color:rgba(214,236,244,.74);
      font-size:12px;
      font-weight:850;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .shootsIntroAsideText{
      margin:0;
      color:rgba(224,232,240,.74);
      font-size:15px;
      line-height:1.72;
    }
    .shootsPresence,
    .shootsNote{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid rgba(129,216,208,.18);
      background:
        linear-gradient(140deg, rgba(5,10,17,.94), rgba(3,6,12,.92)),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.10), transparent 70%);
      box-shadow:
        inset 0 1px 0 rgba(208,234,244,.05),
        0 24px 66px rgba(0,0,0,.24);
      padding:30px;
    }
    .shootsPresenceHead{
      display:grid;
      gap:8px;
      margin-bottom:18px;
    }
    .shootsPresenceGrid{
      display:grid;
      grid-template-columns:minmax(0, 1.24fr) minmax(300px, .76fr);
      gap:18px;
      align-items:start;
    }
    .shootsMapCard,
    .shootsCities{
      position:relative;
      border-radius:26px;
      border:1px solid rgba(129,216,208,.14);
      background:
        linear-gradient(180deg, rgba(11,18,30,.84), rgba(8,14,24,.74)),
        radial-gradient(90% 80% at 0% 0%, rgba(129,216,208,.12), transparent 72%);
      box-shadow: inset 0 1px 0 rgba(214,236,244,.04);
    }
    .shootsMapCard{
      min-height:520px;
      padding:16px;
    }
    .shootsMapFrame{
      position:relative;
      min-height:486px;
      height:100%;
      overflow:hidden;
      border-radius:22px;
      background:
        linear-gradient(180deg, rgba(4,9,16,.98), rgba(3,7,14,.94)),
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.12), transparent 74%);
      box-shadow:
        inset 0 0 0 1px rgba(129,216,208,.09),
        0 26px 54px rgba(0,0,0,.18);
    }
    .shootsMapFrame::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(129,216,208,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129,216,208,.08) 1px, transparent 1px);
      background-size:72px 72px;
      opacity:.34;
      mask-image: radial-gradient(100% 100% at 50% 50%, #000 62%, transparent 100%);
      -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 62%, transparent 100%);
      pointer-events:none;
    }
    .shootsMapFrame::after{
      content:"";
      position:absolute;
      inset:auto -8% -26% 34%;
      height:42%;
      background:radial-gradient(circle, rgba(129,216,208,.16) 0%, rgba(129,216,208,0) 72%);
      filter:blur(24px);
      pointer-events:none;
    }
    .shootsMapSvg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }
    .shootsMapContour{
      fill:none;
      stroke:rgba(129,216,208,.16);
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-dasharray:8 12;
    }
    .shootsMapRoute{
      fill:none;
      stroke:url(#shootMapLine);
      stroke-width:3;
      stroke-linecap:round;
      stroke-dasharray:6 10;
    }
    .shootsMapPoint{
      position:absolute;
      left:var(--x);
      top:var(--y);
      transform:translate(-50%, -50%);
      display:grid;
      gap:10px;
      justify-items:center;
      border:0;
      background:transparent;
      padding:0;
      cursor:default;
      color:inherit;
    }
    .shootsMapPointDot{
      width:14px;
      height:14px;
      border-radius:999px;
      background:#9ff7f1;
      box-shadow:
        0 0 0 6px rgba(129,216,208,.14),
        0 0 24px rgba(129,216,208,.48),
        0 0 42px rgba(129,216,208,.24);
      animation: shootsPointPulse 2.8s ease-in-out infinite;
    }
    .shootsMapPointLabel{
      opacity:0;
      transform:translateY(6px);
      min-width:max-content;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(129,216,208,.2);
      background:rgba(7,12,21,.9);
      color:rgba(236,246,250,.96);
      font-size:12px;
      font-weight:800;
      letter-spacing:.02em;
      transition:opacity .2s ease, transform .2s ease;
      pointer-events:none;
    }
    .shootsMapPoint:hover .shootsMapPointLabel,
    .shootsMapPoint:focus-visible .shootsMapPointLabel{
      opacity:1;
      transform:translateY(0);
    }
    .shootsCities{
      padding:20px;
      display:grid;
      gap:16px;
      align-content:start;
    }
    .shootsCitiesLabel{
      color:rgba(214,236,244,.74);
      font-size:12px;
      font-weight:850;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .shootsCityGrid{
      display:grid;
      gap:12px;
    }
    .shootsCityCard{
      display:grid;
      gap:6px;
      padding:16px 16px 15px;
      border-radius:18px;
      border:1px solid rgba(129,216,208,.12);
      background:rgba(8,14,22,.66);
    }
    .shootsCityName{
      margin:0;
      font-size:22px;
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight:900;
      color:rgba(244,248,250,.96);
    }
    .shootsCityMeta{
      margin:0;
      color:rgba(218,228,236,.66);
      font-size:14px;
      line-height:1.6;
    }
    .shootsNoteGrid{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(300px, .72fr);
      gap:18px;
      align-items:start;
    }
    .shootsNoteText{
      margin:0;
      max-width:780px;
      color:rgba(222,232,240,.76);
      font-size:17px;
      line-height:1.72;
    }
    .shootsNoteTags{
      display:grid;
      gap:12px;
    }
    .shootsNoteTag{
      padding:16px 18px;
      border-radius:18px;
      border:1px solid rgba(129,216,208,.16);
      background:rgba(9,15,24,.68);
      color:rgba(236,246,250,.88);
      font-size:14px;
      line-height:1.5;
      font-weight:700;
    }
    .shootsBackMobile{
      display:none;
    }
    .shootsBackMobile .brandIntroB2gMobileArrow{
      left:14px;
      right:auto;
      transform:rotate(-135deg);
    }
    .shootsBackMobile{
      padding-left:40px;
      padding-right:14px;
    }
    html:not(.dark) .shootsIntro,
    html:not(.dark) .shootsPresence,
    html:not(.dark) .shootsNote{
      background:
        linear-gradient(140deg, rgba(248,251,253,.94), rgba(239,245,248,.90)),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.14), transparent 70%);
      border-color:rgba(136,204,195,.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 24px 58px rgba(17,12,46,.1);
    }
    html:not(.dark) .shootsFlow::before{
      background:
        radial-gradient(58% 72% at 50% 18%, rgba(129,216,208,.24), transparent 72%),
        radial-gradient(34% 46% at 18% 30%, rgba(129,216,208,.1), transparent 74%),
        radial-gradient(34% 46% at 82% 30%, rgba(129,216,208,.1), transparent 74%);
      opacity:.92;
    }
    html:not(.dark) .shootsFlow::after{
      background:
        radial-gradient(60% 76% at 50% 82%, rgba(129,216,208,.2), transparent 74%),
        radial-gradient(40% 54% at 22% 74%, rgba(129,216,208,.1), transparent 76%),
        radial-gradient(40% 54% at 78% 74%, rgba(129,216,208,.1), transparent 76%);
      opacity:.8;
    }
    html:not(.dark) .shootsIntroAside,
    html:not(.dark) .shootsMapCard,
    html:not(.dark) .shootsCities,
    html:not(.dark) .shootsCityCard,
    html:not(.dark) .shootsNoteTag,
    html:not(.dark) .shootsMapFrame{
      background:
        linear-gradient(180deg, rgba(252,254,255,.96), rgba(244,249,252,.88)),
        radial-gradient(120% 100% at 0% 0%, rgba(129,216,208,.12), transparent 72%);
      border-color:rgba(136,204,195,.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.44),
        0 16px 38px rgba(17,12,46,.08);
    }
    html:not(.dark) .shootsEyebrow,
    html:not(.dark) .shootsCitiesLabel,
    html:not(.dark) .shootsIntroAsideLabel{
      color:rgba(46,78,92,.76);
    }
    html:not(.dark) .shootsIntroSub,
    html:not(.dark) .shootsIntroAsideText,
    html:not(.dark) .shootsCityMeta,
    html:not(.dark) .shootsNoteText{
      color:rgba(54,72,88,.76);
    }
    html:not(.dark) .shootsCityName{
      color:rgba(16,24,34,.94);
    }
    html:not(.dark) .shootsMapPointLabel{
      background:rgba(247,251,253,.96);
      color:rgba(24,48,62,.92);
    }
    body.is-page-leaving #brand-intro.brandIntro,
    body.is-page-leaving #site.hero.authorHeroWithRail,
    body.is-b2g-leaving #brand-intro.brandIntro{
      animation: brandIntroB2gExit .28s cubic-bezier(.18,.76,.2,1) forwards;
    }
    body.is-page-leaving .brandIntroB2gRail,
    body.is-b2g-leaving .brandIntroB2gRail{
      animation: brandB2gRailExit .28s cubic-bezier(.18,.76,.2,1) forwards;
    }
    body.is-page-leaving .brandIntroB2gMobile{
      animation: brandIntroB2gExit .22s cubic-bezier(.18,.76,.2,1) forwards;
    }
    @keyframes shootsPointPulse{
      0%,100%{
        box-shadow:
          0 0 0 6px rgba(129,216,208,.14),
          0 0 24px rgba(129,216,208,.48),
          0 0 42px rgba(129,216,208,.24);
      }
      50%{
        box-shadow:
          0 0 0 10px rgba(129,216,208,.08),
          0 0 30px rgba(129,216,208,.62),
          0 0 56px rgba(129,216,208,.3);
      }
    }
    @media (max-width: 1320px){
      .authorShootRail{
        left:calc(100% + 18px);
      }
    }
    @media (max-width: 1180px){
      .shootsIntroGrid,
      .shootsPresenceGrid,
      .shootsNoteGrid{
        grid-template-columns:1fr;
      }
      .shootsMapCard{
        min-height:460px;
      }
      .shootsMapFrame{
        min-height:426px;
      }
    }
    @media (max-width: 1120px){
      .authorShootMobile,
      .shootsBackMobile{
        display:grid;
      }
    }
    @media (max-width: 760px){
      .shootsFlow::before{
        top:-104px;
        height:250px;
        width:118%;
      }
      .shootsFlow::after{
        bottom:-122px;
        height:270px;
        width:118%;
      }
      .shootsIntro,
      .shootsPresence,
      .shootsNote{
        border-radius:22px;
        padding:18px;
      }
      .shootsIntroTitle{
        font-size:clamp(38px, 11vw, 58px);
      }
      .shootsIntroSub,
      .shootsNoteText{
        font-size:15px;
        line-height:1.65;
      }
      .shootsMapCard{
        min-height:380px;
        padding:10px;
      }
      .shootsMapFrame{
        min-height:352px;
      }
      .shootsMapFrame::before{
        background-size:52px 52px;
      }
      .shootsMapPointLabel{
        font-size:11px;
        padding:7px 9px;
      }
      .shootsCityName{
        font-size:19px;
      }
      .shootsCityMeta,
      .shootsNoteTag,
      .shootsIntroAsideText{
        font-size:13px;
      }
    }

    .shootsFlow{
      max-width:1380px;
      margin:28px auto 0;
      display:grid;
      gap:24px;
      position:relative;
      isolation:isolate;
    }
    .shootsFlow::before,
    .shootsFlow::after{
      content:"";
      position:absolute;
      left:50%;
      width:min(1460px, 118vw);
      transform:translateX(-50%);
      pointer-events:none;
      z-index:0;
      filter:blur(16px);
    }
    .shootsFlow::before{
      top:-132px;
      height:320px;
      background:
        radial-gradient(52% 82% at 20% 20%, rgba(255,255,255,.42), transparent 72%),
        radial-gradient(44% 74% at 80% 18%, rgba(129,216,208,.28), transparent 72%),
        radial-gradient(56% 90% at 50% 34%, rgba(194,240,252,.26), transparent 76%);
      opacity:.92;
    }
    .shootsFlow::after{
      bottom:-150px;
      height:360px;
      background:
        radial-gradient(58% 82% at 50% 70%, rgba(129,216,208,.24), transparent 74%),
        radial-gradient(36% 70% at 16% 62%, rgba(255,255,255,.26), transparent 74%),
        radial-gradient(36% 70% at 84% 62%, rgba(194,240,252,.24), transparent 74%);
      opacity:.9;
    }
    .shootsIntro,
    .shootsPresence{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid rgba(194,220,228,.82);
      background:
        linear-gradient(180deg, rgba(253,254,255,.98), rgba(244,249,251,.94)),
        radial-gradient(120% 120% at 0% 0%, rgba(194,240,252,.28), transparent 62%),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.22), transparent 66%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 28px 64px rgba(19,31,42,.10);
    }
    html.dark .shootsIntro,
    html.dark .shootsPresence{
      border-color:rgba(194,220,228,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 28px 64px rgba(0,0,0,.22);
    }
    .shootsIntro{
      padding:44px;
    }
    .shootsIntro::before,
    .shootsPresence::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(128deg, rgba(255,255,255,.56), rgba(255,255,255,0) 32%),
        radial-gradient(42% 64% at 18% 18%, rgba(194,240,252,.24), transparent 74%),
        radial-gradient(34% 52% at 88% 12%, rgba(129,216,208,.18), transparent 74%);
      opacity:.92;
    }
    .shootsIntroGrid,
    .shootsPresenceGrid{
      position:relative;
      z-index:1;
    }
    .shootsIntroGrid{
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr);
      gap:28px;
      align-items:stretch;
    }
    .shootsEyebrow{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(173,210,218,.78);
      background:rgba(255,255,255,.72);
      color:rgba(61,95,109,.78);
      font-size:12px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      box-shadow:0 10px 24px rgba(50,82,95,.08);
    }
    .shootsIntroTitle{
      margin:20px 0 0;
      max-width:9.4ch;
      color:#101a24;
      font-size:clamp(58px, 7vw, 96px);
      line-height:.93;
      letter-spacing:-.06em;
      font-weight:950;
      text-wrap:balance;
    }
    .shootsIntroSub{
      margin:18px 0 0;
      max-width:780px;
      color:rgba(46,66,80,.82);
      font-size:18px;
      line-height:1.78;
      text-wrap:pretty;
    }
    .shootsIntroAside{
      display:grid;
      gap:16px;
      align-content:start;
      padding:24px;
      border-radius:26px;
      border:1px solid rgba(181,214,221,.88);
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(244,250,252,.88)),
        radial-gradient(100% 100% at 100% 0%, rgba(129,216,208,.18), transparent 72%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 18px 34px rgba(22,35,48,.08);
    }
    .shootsIntroAsideLabel,
    .shootsCitiesLabel,
    .shootsMapCardLabel{
      color:rgba(72,102,116,.78);
      font-size:12px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .shootsIntroAsideText,
    .shootsMapCardText,
    .shootsCitiesIntro,
    .shootsCitiesNoteText{
      margin:0;
      color:rgba(48,68,82,.8);
      font-size:15px;
      line-height:1.72;
      text-wrap:pretty;
    }
    .shootsIntroStats{
      display:grid;
      gap:10px;
      margin-top:4px;
    }
    .shootsIntroStat{
      display:grid;
      gap:4px;
      padding:14px 16px;
      border-radius:18px;
      border:1px solid rgba(188,220,226,.84);
      background:rgba(255,255,255,.76);
    }
    .shootsIntroStatValue{
      color:#13202b;
      font-size:26px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .shootsIntroStatLabel{
      color:rgba(54,76,90,.76);
      font-size:13px;
      line-height:1.5;
      font-weight:700;
    }
    .shootsPresence{
      padding:34px;
    }
    .shootsPresenceHead{
      position:relative;
      z-index:1;
      display:grid;
      gap:10px;
      margin-bottom:20px;
    }
    .shootsPresenceHead .brandBusinessTitle{
      color:#101922;
      margin:0;
    }
    .shootsPresenceHead .brandBusinessSub{
      margin:0;
      max-width:860px;
      color:rgba(51,72,86,.78);
      line-height:1.72;
    }
    .shootsPresenceGrid{
      display:grid;
      grid-template-columns:minmax(0, 1.52fr) minmax(300px, .58fr);
      gap:20px;
      align-items:start;
    }
    .shootsMapCard,
    .shootsCities{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(188,220,226,.84);
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,249,251,.90)),
        radial-gradient(110% 100% at 0% 0%, rgba(194,240,252,.18), transparent 72%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 18px 40px rgba(19,31,42,.08);
    }
    .shootsMapCard{
      padding:18px;
    }
    .shootsMapCardHead{
      display:grid;
      gap:8px;
      padding:6px 6px 16px;
    }
    .shootsMapFrame{
      position:relative;
      min-height:620px;
      overflow:hidden;
      border-radius:24px;
      background:
        linear-gradient(180deg, rgba(245,251,253,.98), rgba(234,244,247,.94)),
        radial-gradient(88% 72% at 50% 44%, rgba(129,216,208,.16), transparent 72%);
      box-shadow:
        inset 0 0 0 1px rgba(189,218,224,.84),
        0 20px 42px rgba(16,28,38,.08);
    }
    .shootsMapFrame::before{
      background-image:
        linear-gradient(rgba(129,216,208,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129,216,208,.14) 1px, transparent 1px);
      background-size:80px 80px;
      opacity:.58;
    }
    .shootsMapFrame::after{
      inset:auto -6% -20% 38%;
      height:48%;
      background:radial-gradient(circle, rgba(129,216,208,.26) 0%, rgba(129,216,208,0) 72%);
      filter:blur(28px);
    }
    .shootsMapContour{
      stroke:rgba(104,156,169,.24);
      stroke-width:2.4;
      stroke-dasharray:10 14;
    }
    .shootsMapRoute{
      stroke-width:3.5;
      stroke-dasharray:7 12;
    }
    .shootsMapPoint{
      gap:8px;
    }
    .shootsMapPointDot{
      width:16px;
      height:16px;
      background:#7cd9d2;
      box-shadow:
        0 0 0 7px rgba(129,216,208,.18),
        0 0 26px rgba(129,216,208,.42),
        0 0 46px rgba(129,216,208,.22);
    }
    .shootsMapPointLabel{
      opacity:1;
      transform:none;
      padding:8px 11px;
      border:1px solid rgba(179,214,221,.9);
      background:rgba(252,254,255,.9);
      color:#1c3241;
      font-size:12px;
      font-weight:800;
      box-shadow:0 12px 22px rgba(20,36,48,.08);
    }
    .shootsCities{
      padding:22px;
      display:grid;
      gap:16px;
      align-content:start;
    }
    .shootsCityGrid{
      display:grid;
      gap:10px;
    }
    .shootsCityCard{
      display:grid;
      gap:5px;
      padding:14px 15px;
      border-radius:18px;
      border:1px solid rgba(190,220,226,.84);
      background:rgba(255,255,255,.72);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }
    .shootsCityName{
      margin:0;
      color:#111b24;
      font-size:22px;
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight:900;
    }
    .shootsCityMeta{
      margin:0;
      color:rgba(58,79,92,.74);
      font-size:14px;
      line-height:1.56;
    }
    .shootsCitiesNote{
      display:grid;
      gap:12px;
      margin-top:4px;
      padding-top:8px;
      border-top:1px solid rgba(190,220,226,.72);
    }
    .shootsCitiesNoteTitle{
      margin:0;
      color:#13202b;
      font-size:24px;
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:900;
    }
    .shootsNoteTags{
      display:grid;
      gap:10px;
    }
    .shootsNoteTag{
      padding:13px 14px;
      border-radius:16px;
      border:1px solid rgba(188,220,226,.82);
      background:rgba(255,255,255,.72);
      color:rgba(49,70,84,.84);
      font-size:13px;
      line-height:1.5;
      font-weight:800;
    }
    .shootsBackMobile{
      display:none;
      padding-left:40px;
      padding-right:14px;
    }
    .shootsBackMobile .brandIntroB2gMobileArrow{
      left:14px;
      right:auto;
      transform:rotate(-135deg);
    }
    @media (max-width: 1260px){
      .shootsPresenceGrid{
        grid-template-columns:minmax(0, 1.24fr) minmax(280px, .76fr);
      }
      .shootsMapFrame{
        min-height:560px;
      }
    }
    @media (max-width: 1120px){
      .authorShootMobile,
      .shootsBackMobile{
        display:grid;
      }
      .shootsIntroGrid,
      .shootsPresenceGrid{
        grid-template-columns:1fr;
      }
      .shootsMapFrame{
        min-height:500px;
      }
    }
    @media (max-width: 760px){
      .shootsFlow{
        gap:18px;
      }
      .shootsIntro,
      .shootsPresence{
        border-radius:24px;
        padding:20px;
      }
      .shootsIntroTitle{
        font-size:clamp(42px, 12vw, 60px);
      }
      .shootsIntroSub,
      .shootsIntroAsideText,
      .shootsMapCardText,
      .shootsCitiesIntro,
      .shootsCitiesNoteText{
        font-size:14px;
        line-height:1.64;
      }
      .shootsIntroAside{
        padding:18px;
      }
      .shootsIntroStats{
        grid-template-columns:1fr;
      }
      .shootsPresence{
        padding:18px;
      }
      .shootsMapCard{
        padding:12px;
      }
      .shootsMapFrame{
        min-height:360px;
      }
      .shootsMapFrame::before{
        background-size:54px 54px;
      }
      .shootsMapPointLabel{
        font-size:10px;
        padding:6px 8px;
      }
      .shootsCityName{
        font-size:18px;
      }
      .shootsCityMeta,
      .shootsNoteTag,
      .shootsIntroStatLabel{
        font-size:12px;
      }
      .shootsCities{
        padding:18px;
      }
    }

    .shootsPageShell{
      max-width:1680px;
      padding:0 18px;
      overflow-x:clip;
    }
    html:has(.shootsPageShell),
    body:has(.shootsPageShell){
      overflow-x:hidden;
    }
    .shootsPageShell #shoots-page{
      width:100%;
      overflow-x:clip;
    }
    .shootsPageShell .siteLegalSignature{
      max-width:none;
      position:relative;
      z-index:2;
      margin:28px auto 0;
      padding:10px 12px 6px;
    }
    .shootsFlow{
      max-width:none;
      width:100%;
      margin:28px auto 0;
      gap:28px;
      overflow-x:clip;
    }
    .shootsFlow::before,
    .shootsFlow::after{
      width:min(1860px, 132vw);
      filter:blur(22px);
    }
    .shootsFlow::before{
      top:-156px;
      height:360px;
      background:
        radial-gradient(44% 80% at 18% 22%, rgba(129,216,208,.16), transparent 74%),
        radial-gradient(42% 82% at 82% 20%, rgba(129,216,208,.14), transparent 76%),
        radial-gradient(60% 96% at 50% 26%, rgba(181,222,236,.12), transparent 80%);
      opacity:.9;
    }
    .shootsFlow::after{
      display:none;
    }
    .shootsIntro,
    .shootsPresence{
      border-radius:36px;
      border:1px solid rgba(154,184,197,.22);
      background:
        linear-gradient(180deg, rgba(16,23,34,.9), rgba(10,15,24,.86)),
        radial-gradient(130% 120% at 0% 0%, rgba(129,216,208,.14), transparent 62%),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.1), transparent 66%);
      box-shadow:
        inset 0 1px 0 rgba(233,245,248,.08),
        0 28px 74px rgba(0,0,0,.26);
    }
    .shootsIntro::before,
    .shootsPresence::before{
      background:
        linear-gradient(122deg, rgba(255,255,255,.08), rgba(255,255,255,0) 28%),
        radial-gradient(40% 62% at 16% 16%, rgba(129,216,208,.1), transparent 74%),
        radial-gradient(34% 56% at 88% 12%, rgba(129,216,208,.08), transparent 76%);
      opacity:1;
    }
    .shootsIntro{
      padding:48px;
    }
    .shootsIntroGrid{
      grid-template-columns:minmax(0, 1.72fr) minmax(300px, .42fr);
      gap:32px;
    }
    .shootsEyebrow{
      border-color:rgba(153,201,205,.24);
      background:rgba(255,255,255,.04);
      color:rgba(201,227,232,.74);
      box-shadow:none;
    }
    .shootsIntroTitle{
      max-width:8.8ch;
      color:rgba(244,248,250,.98);
      font-size:clamp(64px, 7.6vw, 112px);
    }
    .shootsIntroSub{
      max-width:900px;
      color:rgba(214,226,233,.76);
      font-size:19px;
      line-height:1.82;
    }
    .shootsIntroAside{
      padding:24px;
      border-color:rgba(153,201,205,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(10,16,26,.52);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 20px 36px rgba(0,0,0,.18);
    }
    .shootsIntroAsideLabel,
    .shootsCitiesLabel,
    .shootsMapCardLabel{
      color:rgba(194,220,226,.7);
    }
    .shootsIntroAsideText,
    .shootsMapCardText,
    .shootsCitiesIntro,
    .shootsCitiesNoteText{
      color:rgba(215,226,232,.7);
    }
    .shootsIntroStat{
      border-color:rgba(153,201,205,.14);
      background:rgba(255,255,255,.035);
    }
    .shootsIntroStatValue{
      color:rgba(245,249,250,.96);
    }
    .shootsIntroStatLabel{
      color:rgba(206,219,225,.68);
    }
    .shootsPresence{
      padding:38px;
    }
    .shootsPresenceHead{
      margin-bottom:24px;
    }
    .shootsPresenceHead .brandBusinessTitle{
      color:rgba(245,249,250,.96);
      font-size:clamp(42px, 4.4vw, 68px);
      line-height:.98;
      letter-spacing:-.05em;
    }
    .shootsPresenceHead .brandBusinessSub{
      max-width:980px;
      color:rgba(214,226,233,.72);
      font-size:17px;
    }
    .shootsPresenceGrid{
      grid-template-columns:minmax(0, 2.08fr) minmax(280px, .38fr);
      gap:22px;
      align-items:stretch;
    }
    .shootsMapCard,
    .shootsCities{
      border-color:rgba(153,201,205,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        rgba(8,14,24,.58);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 42px rgba(0,0,0,.16);
    }
    .shootsMapCard{
      padding:20px;
    }
    .shootsMapCardHead{
      padding:4px 4px 18px;
    }
    .shootsMapFrame{
      min-height:760px;
      border-radius:26px;
      background:
        linear-gradient(180deg, rgba(6,10,18,.96), rgba(5,9,16,.92)),
        radial-gradient(72% 72% at 50% 42%, rgba(129,216,208,.12), transparent 74%);
      box-shadow:
        inset 0 0 0 1px rgba(153,201,205,.1),
        0 24px 54px rgba(0,0,0,.18);
    }
    .shootsMapFrame::before{
      background-image:
        linear-gradient(rgba(129,216,208,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129,216,208,.08) 1px, transparent 1px);
      background-size:96px 96px;
      opacity:.4;
    }
    .shootsMapFrame::after{
      inset:auto -10% -24% 42%;
      height:54%;
      background:
        radial-gradient(circle, rgba(129,216,208,.22) 0%, rgba(129,216,208,0) 70%);
      filter:blur(34px);
    }
    .shootsMapContour{
      stroke:rgba(153,201,205,.22);
      stroke-width:2.6;
      stroke-dasharray:11 14;
    }
    .shootsMapRoute{
      stroke-width:3.6;
      stroke-dasharray:8 12;
    }
    .shootsMapPointDot{
      width:15px;
      height:15px;
    }
    .shootsMapPointLabel{
      background:rgba(12,19,30,.88);
      border-color:rgba(153,201,205,.18);
      color:rgba(241,247,250,.94);
      box-shadow:0 14px 24px rgba(0,0,0,.18);
    }
    .shootsCities{
      padding:22px;
      align-content:start;
    }
    .shootsCityGrid{
      gap:12px;
    }
    .shootsCityCard{
      padding:15px 16px;
      border-color:rgba(153,201,205,.14);
      background:rgba(255,255,255,.035);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .shootsCityName{
      color:rgba(244,248,250,.96);
    }
    .shootsCityMeta{
      color:rgba(212,224,230,.66);
    }
    .shootsCitiesNote{
      border-top-color:rgba(153,201,205,.12);
    }
    .shootsCitiesNoteTitle{
      color:rgba(244,248,250,.96);
    }
    .shootsNoteTag{
      border-color:rgba(153,201,205,.14);
      background:rgba(255,255,255,.035);
      color:rgba(222,231,236,.8);
    }
    html:not(.dark) .shootsIntro,
    html:not(.dark) .shootsPresence{
      border-color:rgba(194,220,228,.82);
      background:
        linear-gradient(180deg, rgba(253,254,255,.98), rgba(244,249,251,.94)),
        radial-gradient(120% 120% at 0% 0%, rgba(194,240,252,.28), transparent 62%),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.22), transparent 66%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 28px 64px rgba(19,31,42,.10);
    }
    html:not(.dark) .shootsIntro::before,
    html:not(.dark) .shootsPresence::before{
      background:
        linear-gradient(128deg, rgba(255,255,255,.56), rgba(255,255,255,0) 32%),
        radial-gradient(42% 64% at 18% 18%, rgba(194,240,252,.24), transparent 74%),
        radial-gradient(34% 52% at 88% 12%, rgba(129,216,208,.18), transparent 74%);
    }
    html:not(.dark) .shootsEyebrow{
      border-color:rgba(173,210,218,.78);
      background:rgba(255,255,255,.72);
      color:rgba(61,95,109,.78);
    }
    html:not(.dark) .shootsIntroTitle,
    html:not(.dark) .shootsPresenceHead .brandBusinessTitle,
    html:not(.dark) .shootsCityName,
    html:not(.dark) .shootsCitiesNoteTitle{
      color:#101a24;
    }
    html:not(.dark) .shootsIntroSub,
    html:not(.dark) .shootsPresenceHead .brandBusinessSub,
    html:not(.dark) .shootsIntroAsideText,
    html:not(.dark) .shootsMapCardText,
    html:not(.dark) .shootsCitiesIntro,
    html:not(.dark) .shootsCityMeta,
    html:not(.dark) .shootsCitiesNoteText{
      color:rgba(48,68,82,.8);
    }
    html:not(.dark) .shootsIntroAside,
    html:not(.dark) .shootsMapCard,
    html:not(.dark) .shootsCities,
    html:not(.dark) .shootsCityCard,
    html:not(.dark) .shootsIntroStat,
    html:not(.dark) .shootsNoteTag{
      border-color:rgba(188,220,226,.84);
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,249,251,.90)),
        radial-gradient(110% 100% at 0% 0%, rgba(194,240,252,.18), transparent 72%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 18px 40px rgba(19,31,42,.08);
    }
    html:not(.dark) .shootsMapFrame{
      background:
        linear-gradient(180deg, rgba(245,251,253,.98), rgba(234,244,247,.94)),
        radial-gradient(88% 72% at 50% 44%, rgba(129,216,208,.16), transparent 72%);
      box-shadow:
        inset 0 0 0 1px rgba(189,218,224,.84),
        0 20px 42px rgba(16,28,38,.08);
    }
    html:not(.dark) .shootsMapPointLabel{
      background:rgba(252,254,255,.9);
      border-color:rgba(179,214,221,.9);
      color:#1c3241;
    }
    @media (max-width: 1320px){
      .shootsPageShell{
        max-width:1520px;
        padding:0 18px;
      }
      .shootsPresenceGrid{
        grid-template-columns:minmax(0, 1.72fr) minmax(270px, .48fr);
      }
      .shootsMapFrame{
        min-height:700px;
      }
    }
    @media (max-width: 1120px){
      .shootsPageShell{
        padding:0 14px;
      }
      .shootsIntroGrid,
      .shootsPresenceGrid{
        grid-template-columns:1fr;
      }
      .shootsIntro,
      .shootsPresence{
        padding:24px;
      }
      .shootsMapFrame{
        min-height:500px;
      }
    }
    @media (max-width: 760px){
      .shootsPageShell{
        padding:0 10px;
      }
      .shootsFlow{
        gap:18px;
      }
      .shootsIntro,
      .shootsPresence{
        border-radius:24px;
        padding:18px;
      }
      .shootsIntroTitle{
        font-size:clamp(42px, 12vw, 60px);
      }
      .shootsIntroSub,
      .shootsPresenceHead .brandBusinessSub{
        font-size:14px;
        line-height:1.64;
      }
      .shootsMapFrame{
        min-height:360px;
      }
      .shootsMapFrame::before{
        background-size:56px 56px;
      }
      .shootsMapPointLabel{
        font-size:10px;
        padding:6px 8px;
      }
      .shootsCityName{
        font-size:18px;
      }
      .shootsCityMeta,
      .shootsNoteTag,
      .shootsIntroStatLabel,
      .shootsCitiesIntro,
      .shootsCitiesNoteText{
        font-size:12px;
      }
    }

    .shootsPageShell{
      max-width:1520px;
      padding:0 20px;
      overflow-x:hidden;
    }
    html:has(.shootsPageShell),
    body:has(.shootsPageShell){
      overflow-x:hidden;
    }
    body:has(.shootsPageShell){
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 68%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    html.dark body:has(.shootsPageShell){
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 68%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    html:not(.dark) body:has(.shootsPageShell){
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.16), transparent 68%),
        linear-gradient(180deg, rgba(250,250,252,.98), rgba(244,245,250,1));
    }
    body.shootsLanding{
      overflow-x:hidden;
      overflow-y:hidden;
      position:relative;
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 68%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    html.shootsLandingPage{
      overflow-y:hidden;
    }
    body.shootsLanding::after{
      content:"";
      position:fixed;
      left:50%;
      bottom:-22vh;
      transform:translateX(-50%);
      width:min(1800px, 130vw);
      height:58vh;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(56% 100% at 50% 0%, rgba(129,216,208,.36) 0%, rgba(129,216,208,.18) 36%, rgba(129,216,208,0) 76%);
      filter:blur(26px);
      opacity:.95;
    }
    html.dark body.shootsLanding{
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.18), transparent 68%),
        linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,1));
    }
    html:not(.dark) body.shootsLanding{
      background:
        radial-gradient(1200px 600px at 50% -10%, rgba(129,216,208,.16), transparent 68%),
        linear-gradient(180deg, rgba(250,250,252,.98), rgba(244,245,250,1));
    }
    html:not(.dark) body.shootsLanding::after{
      background:
        radial-gradient(56% 100% at 50% 0%, rgba(129,216,208,.26) 0%, rgba(129,216,208,.12) 38%, rgba(129,216,208,0) 76%);
      opacity:.82;
      filter:blur(20px);
    }
    body.shootsLanding .tentacles-bg{
      display:none;
    }
    body.shootsLanding .brandTentacles{
      display:none;
    }
    body.shootsLanding .shootsFlow::before,
    body.shootsLanding .shootsFlow::after{
      display:none !important;
    }
    .shootsPageShell #shoots-page{
      overflow:hidden;
    }
    .shootsFlow{
      min-height:auto;
      justify-content:flex-start;
      gap:18px;
    }
    .shootsFlow::before,
    .shootsFlow::after{
      display:none;
    }
    .shootsSoon{
      position:relative;
      z-index:1;
      width:100%;
      display:grid;
      place-items:center;
      padding:18px 0 0;
    }
    .shootsSoonCard{
      width:min(100%, 980px);
      margin:0 auto;
      padding:44px;
      border:1px solid rgba(128,196,204,.24);
      border-radius:36px;
      background:
        linear-gradient(135deg, rgba(10,14,24,.94), rgba(13,22,34,.90)),
        radial-gradient(120% 120% at 100% 0%, rgba(111,214,214,.16), transparent 55%),
        radial-gradient(90% 90% at 0% 100%, rgba(102,225,255,.12), transparent 60%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 30px 80px rgba(0,0,0,.28);
      text-align:center;
    }
    .shootsSoonEyebrow{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-bottom:18px;
      padding:8px 14px;
      border:1px solid rgba(128,196,204,.28);
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:rgba(196,226,232,.78);
      font-size:11px;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .shootsSoonTitle{
      margin:0;
      color:rgba(246,250,252,.98);
      font-size:clamp(42px, 7vw, 88px);
      line-height:.96;
      letter-spacing:-.045em;
    }
    .shootsSoonText{
      width:min(100%, 640px);
      margin:20px auto 0;
      color:rgba(213,225,231,.82);
      font-size:clamp(16px, 2vw, 22px);
      line-height:1.7;
    }
    .shootsSoonActions{
      display:flex;
      justify-content:center;
      margin-top:28px;
    }
    .shootsSoonActions .btn{
      min-width:240px;
      justify-content:center;
      padding:16px 26px;
      border-radius:18px;
      font-size:15px;
      font-weight:800;
      background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border-color:rgba(128,196,204,.26);
      color:rgba(247,250,252,.98);
      box-shadow:0 18px 34px rgba(0,0,0,.22);
    }
    .shootsSoonActions .btn:hover{
      border-color:rgba(128,196,204,.38);
      background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    }
    .shootsPageShell .siteLegalSignature{
      margin-top:12px;
      padding-bottom:14px;
    }
    html:not(.dark) .shootsSoonCard{
      border-color:rgba(188,220,226,.88);
      background:
        linear-gradient(180deg, rgba(253,254,255,.98), rgba(244,249,251,.94)),
        radial-gradient(120% 120% at 100% 0%, rgba(129,216,208,.18), transparent 58%),
        radial-gradient(90% 90% at 0% 100%, rgba(194,240,252,.16), transparent 64%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 28px 64px rgba(19,31,42,.10);
    }
    html:not(.dark) .shootsSoonEyebrow{
      border-color:rgba(173,210,218,.78);
      background:rgba(255,255,255,.74);
      color:rgba(61,95,109,.78);
    }
    html:not(.dark) .shootsSoonTitle{
      color:#101a24;
    }
    html:not(.dark) .shootsSoonText{
      color:rgba(48,68,82,.82);
    }
    html:not(.dark) .shootsSoonActions .btn{
      background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,248,250,.92));
      border-color:rgba(188,220,226,.92);
      color:#182734;
      box-shadow:0 18px 34px rgba(19,31,42,.10);
    }
    @media (max-width: 900px){
      html.shootsLandingPage{
        overflow-y:auto;
      }
      body.shootsLanding{
        overflow-y:auto;
      }
      body.shootsLanding::after{
        bottom:-20vh;
        width:min(1200px, 170vw);
        height:44vh;
      }
      .shootsSoon{
        padding-top:18px;
      }
      .shootsSoonCard{
        padding:28px 22px;
        border-radius:28px;
      }
      .shootsSoonText{
        font-size:15px;
      }
      .shootsSoonActions .btn{
        width:100%;
        min-width:0;
      }
    }

    .fatal{
      position:fixed; inset:14px; z-index:999;
      display:none;
      border-radius:18px;
      background: rgba(2,6,23,.92);
      color:#fff;
      padding:16px;
      border:1px solid rgba(255,255,255,.16);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      box-shadow: 0 24px 70px rgba(0,0,0,.45);
      overflow:auto;
    }
    .fatal code{ display:block; white-space:pre-wrap; color: rgba(255,255,255,.86); margin-top:10px; }
    .aboutArrow{
      position:absolute;
      right:80px;
      top:82px;
      width:180px;
      height:180px;
      pointer-events:none;
      z-index:2;
    }
    html[lang="en"] .aboutArrow{
      top:64px;
    }
    .aboutArrowVideo{
      width:100%;
      height:100%;
      display:block;
      object-fit:contain;
      filter: blur(2.5px);
    }
    .aboutArrowVideo.fallback{ mix-blend-mode: screen; }
    @media (max-width: 900px){
      .aboutArrow{ display:none; }
    }

