html, body{
    margin:0 !important;
    padding:0 !important;
    background:#f6f2ea !important;
    overflow-x:hidden;
  }

  body{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  .wp-site-blocks,
  .site,
  .site-content,
  .site-main,
  .content-area,
  .entry-content,
  .post,
  .page,
  .page-content,
  main,
  .wp-block-group,
  .wp-block-post-content,
  .is-layout-constrained,
  .is-layout-flow,
  .wp-block-html{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body .is-layout-flow > *:first-child,
  body .is-layout-constrained > *:first-child,
  .entry-content > *:first-child,
  .wp-block-post-content > *:first-child{
    margin-block-start:0 !important;
    margin-top:0 !important;
  }

  :root{
    --bg:#f6f2ea;
    --bg2:#f2ede5;
    --panel:#fbf8f2;
    --text:#1b1b1d;
    --muted:#5e5a55;
    --line:rgba(27,27,29,.14);
    --line2:rgba(27,27,29,.08);
    --accent:#1b1b1d;
    --shadow:0 18px 50px rgba(10,10,10,.08);
    --shadow-soft:0 10px 28px rgba(10,10,10,.06);
    --r:18px;
    --max:1180px;
    --ease:cubic-bezier(.22,.9,.22,1);
    --t:560ms;
    --focus:0 0 0 3px rgba(27,27,29,.14);
    --header-offset:96px;
  }

  .vn-wrap[data-theme="dark"]{
    --bg:#0b0b0c;
    --bg2:#111113;
    --panel:#151517;
    --text:#f2f2f2;
    --muted:#bdbdbd;
    --line:rgba(255,255,255,.14);
    --line2:rgba(255,255,255,.08);
    --accent:#ffffff;
    --shadow:0 16px 40px rgba(0,0,0,.55);
    --shadow-soft:0 10px 24px rgba(0,0,0,.35);
    --focus:0 0 0 3px rgba(255,255,255,.14);
  }

  .vn-wrap{
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    position:relative;
    isolation:isolate;
    margin-top:0 !important;
    padding-top:var(--header-offset) !important;
  }

  .vn-wrap::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
      radial-gradient(1200px 700px at 10% 0%, color-mix(in srgb, var(--text) 3%, transparent), transparent 60%),
      radial-gradient(900px 600px at 100% 20%, color-mix(in srgb, var(--text) 3%, transparent), transparent 62%),
      linear-gradient(180deg, var(--bg), var(--bg));
  }

  .vn-wrap,
  .vn-wrap *{
    box-sizing:border-box;
  }

  .vn-wrap img{
    max-width:100%;
    display:block;
  }

  .vn-wrap a{
    color:inherit;
  }

  .vn-wrap button,
  .vn-wrap input,
  .vn-wrap textarea{
    font:inherit;
  }

  .vn-mw{
    max-width:var(--max);
    margin:0 auto;
    padding:0 clamp(16px, 2.2vw, 24px);
  }

  .vn-sec{
    padding:clamp(56px, 8vw, 84px) 0;
    background:transparent;
  }

  .vn-sec.vn-hero{
    padding-top:clamp(14px, 2.5vw, 24px);
  }

  .vn-sec.alt{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--panel) 92%, transparent),
        color-mix(in srgb, var(--panel) 88%, transparent)
      );
    border-top:1px solid var(--line2);
    border-bottom:1px solid var(--line2);
  }

  .vn-kicker{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--muted);
  }

  .vn-h1{
    font-size:clamp(34px, 5vw, 52px);
    line-height:1.03;
    margin:12px 0 14px;
    font-weight:700;
    letter-spacing:-0.03em;
    max-width:13ch;
  }

  .vn-h2{
    font-size:clamp(26px, 3.4vw, 34px);
    line-height:1.12;
    margin:10px 0 10px;
    font-weight:680;
    letter-spacing:-0.02em;
  }

  .vn-h3{
    font-size:clamp(18px, 2vw, 20px);
    line-height:1.24;
    margin:0 0 8px;
    font-weight:650;
    letter-spacing:-0.01em;
  }

  .vn-p{
    color:var(--muted);
    font-size:16px;
    line-height:1.78;
    margin:0;
  }

  .vn-lead{
    color:color-mix(in srgb, var(--text) 86%, transparent);
    font-size:clamp(16px, 2vw, 18px);
    line-height:1.8;
    margin:0;
    max-width:58ch;
  }

  .vn-grid{
    display:grid;
    gap:18px;
  }

  .vn-two{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  }

  .vn-three{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .vn-card{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--text) 5%, transparent),
        color-mix(in srgb, var(--text) 2%, transparent)
      );
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:
      transform 320ms var(--ease),
      border-color 320ms var(--ease),
      background 320ms var(--ease),
      box-shadow 320ms var(--ease);
    will-change:transform;
  }

  .vn-pad{padding:clamp(18px, 2.2vw, 24px);}

  .vn-hr{
    height:1px;
    background:var(--line2);
    margin:18px 0;
  }

  .vn-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--text) 22%, transparent);
    box-shadow:0 22px 56px rgba(10,10,10,.1);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--text) 7%, transparent),
        color-mix(in srgb, var(--text) 2%, transparent)
      );
  }

  .vn-imgph{
    aspect-ratio:16/11;
    background:
      radial-gradient(1200px 420px at 30% 20%, color-mix(in srgb, var(--text) 8%, transparent), transparent),
      linear-gradient(135deg, color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }

  .vn-imgph:after{
    content:"Фото проекта";
    position:absolute;
    left:16px;
    bottom:14px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:color-mix(in srgb, var(--text) 55%, transparent);
    z-index:2;
    pointer-events:none;
  }

  .vn-photo-fill{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .vn-imgph.has-photo:after{
    display:none;
  }

  .vn-btns{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
  }

  .vn-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 16px;
    border-radius:14px;
    font-weight:650;
    text-decoration:none !important;
    border:1px solid var(--line);
    color:var(--text);
    background:color-mix(in srgb, var(--text) 6%, transparent);
    transition:
      transform 220ms var(--ease),
      background 220ms var(--ease),
      border-color 220ms var(--ease),
      filter 220ms var(--ease);
    position:relative;
    overflow:hidden;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:var(--shadow-soft);
  }

  .vn-btn.primary{
    background:var(--accent);
    color:var(--bg);
    border-color:transparent;
  }

  .vn-btn.subtle{
    min-height:40px;
    padding:10px 14px;
    border-radius:12px;
    font-size:13px;
    font-weight:500;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    background:transparent;
    border:1px solid var(--line2);
    box-shadow:none;
  }

  .vn-btn.subtle:hover{
    transform:none;
    background:color-mix(in srgb, var(--text) 4%, transparent);
    border-color:var(--line);
    color:color-mix(in srgb, var(--text) 74%, transparent);
  }

  .vn-btn.primary:hover{filter:brightness(.92);}
  .vn-btn:active{transform:translateY(0);}
  .vn-btn:focus-visible{outline:none; box-shadow:var(--focus);}

  .vn-btn .vn-ripple{
    position:absolute;
    border-radius:999px;
    transform:scale(0);
    background:color-mix(in srgb, var(--bg) 70%, transparent);
    opacity:0;
    pointer-events:none;
  }

  .vn-badge{
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
    background:color-mix(in srgb, var(--text) 5%, transparent);
  }

  .vn-tagrow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }

  .vn-tag{
    font-size:13px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    border:1px solid var(--line2);
    padding:7px 10px;
    border-radius:999px;
    background:color-mix(in srgb, var(--text) 4%, transparent);
    white-space:nowrap;
  }

  .vn-list{
    margin:14px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
  }

  .vn-list li{
    display:flex;
    gap:10px;
    color:var(--muted);
    line-height:1.7;
  }

  .vn-dot{
    width:8px;
    height:8px;
    margin-top:10px;
    border-radius:999px;
    background:color-mix(in srgb, var(--text) 55%, transparent);
    flex:0 0 auto;
  }

  .vn-form{
    display:grid;
    gap:12px;
    margin-top:16px;
    position:relative;
  }

  .vn-in{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--text) 6%, transparent);
    color:var(--text);
    outline:none;
    transition:border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
  }

  .vn-in::placeholder{
    color:color-mix(in srgb, var(--text) 45%, transparent);
  }

  .vn-in:focus{
    border-color:color-mix(in srgb, var(--text) 26%, transparent);
    background:color-mix(in srgb, var(--text) 9%, transparent);
    box-shadow:var(--focus);
  }

  .vn-faq details{box-shadow:none;}
  .vn-faq summary{list-style:none; cursor:pointer;}
  .vn-faq summary::-webkit-details-marker{display:none;}

  .vn-faq summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:var(--text);
    font-weight:650;
  }

  .vn-faq summary .vn-ico{
    width:32px;
    height:32px;
    border-radius:999px;
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    transition:transform 240ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease);
    background:color-mix(in srgb, var(--text) 5%, transparent);
    flex:0 0 auto;
  }

  .vn-faq details[open] summary .vn-ico{
    transform:rotate(45deg);
    border-color:color-mix(in srgb, var(--text) 22%, transparent);
    background:color-mix(in srgb, var(--text) 10%, transparent);
  }

  .vn-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
    width:100%;
    background:rgba(246,242,234,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(27,27,29,.08);
    box-shadow:0 8px 24px rgba(10,10,10,.04);
    transition:
      transform 340ms var(--ease),
      background 340ms var(--ease),
      box-shadow 340ms var(--ease),
      border-color 340ms var(--ease),
      opacity 340ms var(--ease);
    will-change:transform, opacity;
  }

  .vn-wrap[data-theme="dark"] .vn-header{
    background:rgba(11,11,12,.86);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }

  .vn-header.is-scrolled{
    background:rgba(246,242,234,.72);
    box-shadow:0 14px 36px rgba(10,10,10,.08);
  }

  .vn-wrap[data-theme="dark"] .vn-header.is-scrolled{
    background:rgba(11,11,12,.68);
    box-shadow:0 14px 36px rgba(0,0,0,.34);
  }

  .vn-header.is-compact{
    border-bottom-color:rgba(27,27,29,.12);
  }

  .vn-wrap[data-theme="dark"] .vn-header.is-compact{
    border-bottom-color:rgba(255,255,255,.12);
  }

  .vn-header.is-hidden{
    transform:translateY(calc(-100% - 8px));
    opacity:.25;
  }

  .vn-nav{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:10px;
    padding:12px 0;
    transition:padding 320ms var(--ease);
  }

  .vn-header.is-compact .vn-nav{
    padding:8px 0;
  }

  .vn-brand{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none !important;
    color:var(--text);
    min-width:0;
    max-width:100%;
    flex:0 0 auto;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    outline:none !important;
    margin-right:0;
  }

  .vn-brand:focus,
  .vn-brand:active,
  .vn-brand:focus-visible{
    outline:none !important;
    box-shadow:none !important;
  }

  .vn-logo-rect{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:auto;
    max-width:min(100%, 300px);
    height:42px;
    min-height:42px;
    overflow:hidden;
    position:relative;
    -webkit-user-select:none;
    user-select:none;
    pointer-events:none;
    transition:height 320ms var(--ease), min-height 320ms var(--ease);
  }

  .vn-logo-rect img{
    height:42px !important;
    width:auto !important;
    max-height:42px !important;
    max-width:100% !important;
    object-fit:contain;
    display:block;
    transition:opacity 220ms var(--ease), height 320ms var(--ease), max-height 320ms var(--ease);
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    user-drag:none;
    pointer-events:none;
  }

  .vn-header.is-compact .vn-logo-rect{
    height:36px;
    min-height:36px;
  }

  .vn-header.is-compact .vn-logo-rect img{
    height:36px !important;
    max-height:36px !important;
  }

  .vn-logo-light{opacity:1;}
  .vn-logo-dark{
    opacity:0;
    position:absolute;
    left:0;
    top:0;
  }

  .vn-wrap[data-theme="dark"] .vn-logo-light{opacity:0;}
  .vn-wrap[data-theme="dark"] .vn-logo-dark{opacity:1;}

  .vn-links{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
  }

  .vn-link{
    color:color-mix(in srgb, var(--text) 72%, transparent);
    text-decoration:none !important;
    font-size:14px;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid transparent;
    transition:background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
    white-space:nowrap;
  }

  .vn-link:hover{
    background:color-mix(in srgb, var(--text) 6%, transparent);
    border-color:var(--line2);
    color:color-mix(in srgb, var(--text) 92%, transparent);
  }

  .vn-right{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    margin-left:auto;
    flex:0 0 auto;
  }

  .vn-socials{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
  }

  .vn-social{
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid var(--line2);
    background:color-mix(in srgb, var(--text) 4%, transparent);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    transition:
      transform 220ms var(--ease),
      background 220ms var(--ease),
      border-color 220ms var(--ease),
      opacity 220ms var(--ease),
      width 320ms var(--ease),
      height 320ms var(--ease);
    overflow:hidden;
    flex:0 0 auto;
  }

  .vn-social:hover{
    transform:translateY(-1px);
    background:color-mix(in srgb, var(--text) 7%, transparent);
    border-color:color-mix(in srgb, var(--text) 18%, transparent);
  }

  .vn-social img{
    width:16px;
    height:16px;
    object-fit:contain;
    display:block;
    transition:width 320ms var(--ease), height 320ms var(--ease);
  }

  .vn-header.is-compact .vn-social{
    width:30px;
    height:30px;
  }

  .vn-header.is-compact .vn-social img{
    width:14px;
    height:14px;
  }

  .vn-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line2);
    background:color-mix(in srgb, var(--text) 4%, transparent);
    color:color-mix(in srgb, var(--text) 85%, transparent);
    cursor:pointer;
    user-select:none;
    transition:
      transform 220ms var(--ease),
      background 220ms var(--ease),
      border-color 220ms var(--ease),
      padding 320ms var(--ease);
    white-space:nowrap;
    flex:0 0 auto;
  }

  .vn-toggle:hover{
    transform:translateY(-1px);
    background:color-mix(in srgb, var(--text) 7%, transparent);
    border-color:color-mix(in srgb, var(--text) 20%, transparent);
  }

  .vn-toggle:active{transform:translateY(0);}
  .vn-toggle:focus-visible{outline:none; box-shadow:var(--focus);}
  .vn-toggle .vn-ic{
    width:18px;
    height:18px;
    display:inline-block;
    flex:0 0 auto;
  }

  .vn-toggle .vn-label{
    font-size:13px;
    font-weight:650;
    color:color-mix(in srgb, var(--text) 70%, transparent);
  }

  .vn-header.is-compact .vn-toggle{
    padding:8px 10px;
  }

  .vn-btn-mobile-catalog{
    display:none;
  }

  .vn-reveal{opacity:1; transform:none; filter:none;}

  .vn-wrap.vn-js .vn-reveal{
    opacity:0;
    transform:translateY(14px);
    filter:blur(2px);
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);
  }

  .vn-wrap.vn-js .vn-reveal.in{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }

  .vn-showcase{
    margin-top:22px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:18px;
    align-items:stretch;
  }

  .vn-showMain{
    position:relative;
    min-height:clamp(300px, 42vw, 540px);
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 10px);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:
      radial-gradient(1000px 440px at 30% 20%, color-mix(in srgb, var(--text) 8%, transparent), transparent),
      linear-gradient(135deg, color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
    touch-action:pan-y pinch-zoom;
    overscroll-behavior:contain;
  }

  .vn-showMain.has-image{background:none !important;}

  .vn-showImage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }

  .vn-showOverlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.10) 100%);
    pointer-events:none;
    z-index:1;
  }

  .vn-showInfo{
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 10px);
    box-shadow:var(--shadow);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--text) 5%, transparent),
        color-mix(in srgb, var(--text) 2%, transparent)
      );
    padding:clamp(18px, 2.3vw, 28px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:22px;
    min-width:0;
  }

  .vn-showTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .vn-showIndex{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:44px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--text) 4%, transparent);
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
    font-weight:800;
    flex:0 0 auto;
  }

  .vn-showTitle{
    margin:8px 0 0;
    font-size:clamp(24px, 3vw, 34px);
    line-height:1.08;
    font-weight:760;
    letter-spacing:-0.01em;
    color:var(--text);
    max-width:14ch;
  }

  .vn-wrap[data-theme="dark"] .vn-showTitle{color:#ffffff;}

  .vn-showText{
    margin:16px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.82;
    max-width:52ch;
  }

  .vn-showMeta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
  }

  .vn-showBottom{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-top:8px;
  }

  .vn-showNav{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .vn-showArrow{
    width:52px;
    height:52px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
    background:color-mix(in srgb, var(--bg) 74%, transparent);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    display:grid;
    place-items:center;
    cursor:pointer;
    color:color-mix(in srgb, var(--text) 86%, transparent);
    transition:transform 220ms var(--ease), background 220ms var(--ease), opacity 220ms var(--ease);
    flex:0 0 auto;
  }

  .vn-showArrow:hover{
    transform:scale(1.04);
    background:color-mix(in srgb, var(--bg) 84%, transparent);
  }

  .vn-showArrow:active{transform:scale(1);}
  .vn-showArrow:focus-visible{outline:none; box-shadow:var(--focus);}

  .vn-showCounter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:86px;
    height:52px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--text) 4%, transparent);
    color:color-mix(in srgb, var(--text) 74%, transparent);
    font-size:14px;
    font-weight:750;
    flex:0 0 auto;
  }

  .vn-thumbs{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:12px;
  }

  .vn-thumb{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    background:
      radial-gradient(700px 200px at 30% 20%, color-mix(in srgb, var(--text) 8%, transparent), transparent),
      linear-gradient(135deg, color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--text) 3%, transparent));
    box-shadow:var(--shadow-soft);
    cursor:pointer;
    transition:transform 240ms var(--ease), border-color 240ms var(--ease), opacity 240ms var(--ease), filter 240ms var(--ease);
    min-height:108px;
    padding:0;
  }

  .vn-thumb:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--text) 24%, transparent);
  }

  .vn-thumb.is-active{
    border-color:color-mix(in srgb, var(--text) 28%, transparent);
    transform:translateY(-2px);
    filter:brightness(1.02);
  }

  .vn-thumb.has-image{background:none !important;}

  .vn-thumbImage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }

  .vn-thumb::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 48%, rgba(0,0,0,.18) 100%);
    pointer-events:none;
    z-index:1;
  }

  .vn-thumbLabel{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:2;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.45);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .vn-projectSlider{
    position:relative;
    touch-action:pan-y pinch-zoom;
    overscroll-behavior:contain;
  }

  .vn-projectNav{
    position:absolute;
    left:12px;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    gap:12px;
    z-index:3;
    pointer-events:none;
  }

  .vn-projectArrow{
    width:42px;
    height:42px;
    border:none;
    border-radius:999px;
    background:rgba(17,17,17,.52);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transition:transform 220ms var(--ease), background 220ms var(--ease), opacity 220ms var(--ease);
    pointer-events:auto;
  }

  .vn-projectArrow:hover{
    transform:scale(1.06);
    background:rgba(17,17,17,.7);
  }

  .vn-projectDots{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:14px;
  }

  .vn-projectDot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--text) 18%, transparent);
    transition:transform 220ms var(--ease), background 220ms var(--ease);
    cursor:pointer;
  }

  .vn-projectDot.active{
    background:color-mix(in srgb, var(--text) 72%, transparent);
    transform:scale(1.2);
  }

  .vn-footer-bottom{
    padding-top:10px;
    text-align:center;
  }

  @media (max-width:1100px){
    .vn-links{display:none;}
    .vn-nav{
      grid-template-columns:auto 1fr;
    }
    .vn-right{
      justify-self:end;
    }
  }

  @media (max-width:920px){
    .vn-two,.vn-three,.vn-showcase{
      grid-template-columns:1fr;
    }
    .vn-nav{gap:12px;}
    .vn-showMain{min-height:380px;}
    .vn-showTitle{max-width:none;}
    .vn-thumbs{grid-template-columns:repeat(3, minmax(0,1fr));}
  }

  @media (max-width:640px){
    :root{
      --header-offset:88px;
    }

    .vn-mw{padding:0 14px;}

    .vn-sec.vn-hero{
      padding-top:8px;
    }

    .vn-header{
      top:10px;
      left:10px;
      right:10px;
      width:auto;
      border:1px solid rgba(27,27,29,.08);
      border-radius:18px;
      background:rgba(246,242,234,.82);
      box-shadow:0 14px 34px rgba(10,10,10,.12);
      overflow:hidden;
    }

    .vn-wrap[data-theme="dark"] .vn-header{
      background:rgba(11,11,12,.78);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 14px 34px rgba(0,0,0,.28);
    }

    .vn-header.is-scrolled{
      background:rgba(246,242,234,.62);
    }

    .vn-wrap[data-theme="dark"] .vn-header.is-scrolled{
      background:rgba(11,11,12,.58);
    }

    .vn-header.is-hidden{
      transform:translateY(calc(-100% - 18px)) scale(.985);
      opacity:.18;
    }

    .vn-header .vn-nav{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:8px;
      padding:10px 0;
    }

    .vn-header.is-compact .vn-nav{
      padding:8px 0;
    }

    .vn-brand{
      width:100%;
      min-width:0;
      max-width:none;
    }

    .vn-logo-rect{
      max-width:100%;
      width:100%;
      height:54px;
      min-height:54px;
    }

    .vn-logo-rect img{
      height:54px !important;
      max-height:54px !important;
      width:auto !important;
      max-width:100% !important;
    }

    .vn-header.is-compact .vn-logo-rect{
      height:44px;
      min-height:44px;
    }

    .vn-header.is-compact .vn-logo-rect img{
      height:44px !important;
      max-height:44px !important;
    }

    .vn-right{
      justify-self:start;
      margin-left:0;
      gap:6px;
      align-items:center;
      transform:translateX(-8px);
    }

    .vn-socials{
      gap:4px;
    }

    .vn-social{
      width:24px;
      height:24px;
      border-radius:8px;
    }

    .vn-social img{
      width:12px;
      height:12px;
    }

    .vn-header.is-compact .vn-social{
      width:21px;
      height:21px;
    }

    .vn-header.is-compact .vn-social img{
      width:10px;
      height:10px;
    }

    .vn-toggle{
      padding:7px 8px;
      min-height:24px;
      border-radius:10px;
    }

    .vn-toggle .vn-ic{
      width:14px;
      height:14px;
    }

    .vn-toggle .vn-label{display:none;}

    .vn-header.is-compact .vn-toggle{
      padding:6px 7px;
    }

    .vn-btn-desktop-calc{
      display:none !important;
    }

    .vn-btn-mobile-catalog{
      display:inline-flex !important;
      min-height:34px;
      padding:8px 12px;
      border-radius:10px;
      font-size:12px;
      box-shadow:none;
    }

    .vn-header.is-compact .vn-btn-mobile-catalog{
      min-height:31px;
      padding:7px 10px;
    }

    .vn-showcase{gap:12px;}
    .vn-showMain{
      min-height:240px;
      border-radius:20px;
    }
    .vn-showInfo{
      padding:16px;
      border-radius:20px;
      gap:16px;
    }
    .vn-showTop{align-items:flex-start;}
    .vn-showIndex{
      min-width:40px;
      height:40px;
      padding:0 12px;
      font-size:12px;
    }
    .vn-showTitle{
      font-size:22px;
      line-height:1.12;
      margin-top:6px;
    }
    .vn-showText{
      margin-top:12px;
      font-size:15px;
      line-height:1.68;
    }
    .vn-showMeta{
      gap:8px;
      margin-top:18px;
    }
    .vn-showBottom{
      gap:12px;
      padding-top:0;
    }
    .vn-showNav{
      display:grid;
      grid-template-columns:48px 1fr 48px;
      align-items:center;
      gap:10px;
      width:100%;
    }
    .vn-showArrow{
      width:48px;
      height:48px;
    }
    .vn-showCounter{
      width:100%;
      min-width:0;
      height:48px;
      padding:0 10px;
      font-size:13px;
    }
    .vn-thumbs{
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
      margin-top:12px;
    }
    .vn-thumb{
      min-height:84px;
      border-radius:14px;
    }
    .vn-thumbLabel{
      font-size:11px;
      left:8px;
      right:8px;
      bottom:8px;
      -webkit-line-clamp:2;
    }
    .vn-btns{
      flex-direction:column;
      align-items:stretch;
    }
    .vn-btn{width:100%;}
    .vn-footer-bottom .vn-btn.subtle{
      width:auto;
      min-width:0;
      display:inline-flex;
    }

    .vn-projectArrow{
      width:38px;
      height:38px;
    }
  }

  @media (max-width:420px){
    .vn-logo-rect{
      height:56px;
      min-height:56px;
    }

    .vn-logo-rect img{
      height:56px !important;
      max-height:56px !important;
    }

    .vn-header.is-compact .vn-logo-rect{
      height:42px;
      min-height:42px;
    }

    .vn-header.is-compact .vn-logo-rect img{
      height:42px !important;
      max-height:42px !important;
    }

    .vn-social{
      width:22px;
      height:22px;
    }

    .vn-social img{
      width:11px;
      height:11px;
    }

    .vn-toggle{
      padding:6px 7px;
    }

    .vn-toggle .vn-ic{
      width:13px;
      height:13px;
    }

    .vn-right{
      transform:translateX(-10px);
    }

    .vn-showMain{min-height:220px;}
    .vn-showInfo{padding:14px;}
    .vn-thumbs{grid-template-columns:1fr 1fr;}
  }

  @media (prefers-reduced-motion:reduce){
    .vn-wrap.vn-js .vn-reveal{transition:none !important;}
    .vn-card,
    .vn-btn,
    .vn-toggle,
    .vn-showArrow,
    .vn-thumb,
    .vn-social,
    .vn-projectArrow,
    .vn-projectDot,
    .vn-header,
    .vn-nav,
    .vn-logo-rect,
    .vn-logo-rect img{
      transition:none !important;
    }
  }