@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/jost-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/jost-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:300 600;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  :root{
    color-scheme:dark;
    --bg:#121110;
    --bg-2:#181715;
    --card:#1d1c1a;
    --line:#2c2a27;
    --text:#ece5dc;
    --muted:#9d958b;
    --accent:#e9c6ac;
    --accent-ink:#1b1714;
    --photo:brightness(.5) sepia(.45) saturate(.7) contrast(1.1);
    --wrap:1240px;
    --head:"Jost",system-ui,sans-serif;
    --body:"Manrope",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

  h1,h2,h3{font-family:var(--head);font-weight:300;text-transform:uppercase;letter-spacing:.02em;line-height:1.08}
  h2{font-size:clamp(28px,3.4vw,42px);color:var(--accent)}
  .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 28px;font:500 13px var(--body);letter-spacing:.02em;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:.25s}
  .btn--fill{background:var(--accent);color:var(--accent-ink)}
  .btn--fill:hover{background:#f3d7c2}
  .btn--ghost{border-color:#5b544c;color:var(--text);background:transparent}
  .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
  .more{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--text);transition:.25s}
  .more svg{width:18px;transition:transform .25s}
  .more:hover{color:var(--accent)}
  .more:hover svg{transform:translateX(4px)}

  /* header */
  .header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
  .header.scrolled{background:rgba(18,17,16,.92);backdrop-filter:blur(10px);border-color:var(--line)}
  .header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
  .logo{display:block;color:var(--text);transition:color .2s}
  .logo:hover{color:var(--accent)}
  .logo svg{display:block;height:62px;width:145px}
  @media (max-width:860px){.logo svg{height:50px;width:117px}}
  .nav{display:flex;gap:38px;font-size:13px}
  .nav a{opacity:.85;transition:.2s}
  .nav a:hover{opacity:1;color:var(--accent)}
  .header-actions{display:flex;align-items:center;gap:22px}
  .icon-btn{background:none;border:0;color:var(--text);cursor:pointer;display:grid;place-items:center;opacity:.85}
  .icon-btn:hover{color:var(--accent);opacity:1}
  .icon-btn svg{width:19px;height:19px}
  .header-contact{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.35}
  .header-contact a{font:600 16px var(--body);letter-spacing:.02em;color:var(--accent);margin-bottom:2px;transition:color .2s}
  .header-contact a:hover{color:var(--text)}
  .header-contact span{font-size:12.5px;color:#cfc7bd;text-shadow:0 1px 6px rgba(0,0,0,.55)}
  .header .nav{font-weight:600}
  .burger{display:none}

  /* hero */
  .hero{position:relative;min-height:700px;display:flex;align-items:center;padding:120px 0 24px;overflow:hidden}
  .hero+section{padding-top:56px}
  .hero__img{position:absolute;inset:0;background:var(--bg) url("images/hero.webp") right center/cover no-repeat}
  .hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,16,.55) 0%,rgba(18,17,16,0) 40%),linear-gradient(0deg,var(--bg) 0%,rgba(18,17,16,0) 18%)}
  .hero__content{position:relative;max-width:540px}
  .hero h1{font-size:clamp(38px,4.6vw,60px);color:var(--accent);margin:18px 0 26px}
  .hero__lead{color:#cfc7bd;max-width:360px;margin-bottom:36px}
  .features{list-style:none;display:grid;gap:22px;margin-bottom:46px}
  .features li{display:flex;gap:16px;align-items:flex-start}
  .features i{flex:none;width:36px;height:36px;border:1px solid #4a443e;border-radius:50%;display:grid;place-items:center;color:var(--accent)}
  .features i svg{width:16px}
  .features b{display:block;font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase}
  .features span{font-size:12px;color:var(--muted)}
  .hero__cta{display:flex;gap:18px;flex-wrap:wrap}
  .hero__cta .btn{font-weight:600}

  section{padding:90px 0 0}
  section[id],.cat-group{scroll-margin-top:100px}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}

  /* collections */
  .collections{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .col{background:var(--card);display:flex;flex-direction:column;transition:transform .35s}
  .col:hover{transform:translateY(-6px)}
  .col__tex{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:pointer}
  .col__tex img{width:100%;height:100%;object-fit:cover}
  .col__tex .col__label{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .45s ease,transform .6s ease}
  @media (hover:hover){.col__tex:hover .col__label{opacity:1;transform:none}}
  .col__tex.show-label .col__label{opacity:1;transform:none}
  .col__body{padding:22px 20px 26px;display:flex;flex-direction:column;flex:1}
  .col h3{font-size:14px;font-weight:400;letter-spacing:.08em;margin-bottom:8px}
  .col p{font-size:12px;color:var(--muted);line-height:1.5;flex:1;margin-bottom:22px}

  /* audience */
  .audience{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .aud{position:relative;min-height:290px;padding:30px 28px;display:flex;flex-direction:column;overflow:hidden;background:var(--card)}
  .aud__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s}
  .aud:hover .aud__img{transform:scale(1.05)}
  .aud::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,17,16,.92) 0%,rgba(18,17,16,.55) 55%,rgba(18,17,16,.15) 100%)}
  .aud>*:not(.aud__img){position:relative;z-index:2}
  .aud h3{font-size:19px;margin-bottom:14px}
  .aud p{font-size:12.5px;color:#bdb4a9;max-width:250px;margin-bottom:22px}
  .aud .more{margin-top:auto;align-self:flex-start}

  /* projects + reviews */
  .split{display:grid;grid-template-columns:1.55fr 1px 1fr;gap:44px}
  .split__rule{background:var(--line)}
  .projects{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:310px}
  .projects figure{overflow:hidden;position:relative}
  .projects img{width:100%;height:100%;object-fit:cover;filter:var(--photo);transition:transform .8s,filter .4s}
  .projects figure:hover img{transform:scale(1.06);filter:brightness(.8) sepia(.3) saturate(.85)}
  .projects figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,40,25,.35),rgba(18,17,16,.55));mix-blend-mode:multiply;pointer-events:none}
  .projects figcaption{z-index:1;position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:.3s}
  .projects figure:hover figcaption{opacity:1;transform:none}
  .reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .review{background:var(--card);padding:26px 28px 26px 74px;position:relative}
  .review::before{content:"\201C";position:absolute;left:24px;top:14px;font:400 64px/1 Georgia,serif;color:var(--accent)}
  .review p{font-size:13px;color:#cdc5bb;margin-bottom:16px}
  .review b{display:block;font-size:12px;font-weight:500}
  .review span{font-size:11px;color:var(--muted)}

  /* cta */
  .cta{margin-top:90px;background:linear-gradient(100deg,#1a1917 0%,#1e1c1a 60%,#2a2521 100%);position:relative;overflow:hidden}
  .cta .wrap{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:40px;padding-top:64px;padding-bottom:64px}
  .cta__main{display:flex;flex-direction:column;gap:22px;min-width:0}
  .cta h2{font-size:clamp(28px,3vw,38px)}
  .cta__lead{color:#cbc3b8;font-size:14px;max-width:400px}
  .cta__actions{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:40px;margin-top:14px}
  .act{display:grid;grid-template-columns:30px 1fr;gap:4px 16px}
  .act svg{width:26px;color:var(--accent);grid-row:span 2}
  .act b{font:500 11px var(--body);letter-spacing:.12em;text-transform:uppercase}
  .act span{font-size:12px;color:var(--muted)}
  .act .more{grid-column:2;margin-top:14px;font-size:12px}
  .cta__logo{justify-self:center;width:100%;max-width:440px;color:var(--accent)}
  .cta__logo svg{display:block;width:100%;height:auto}

  /* footer */
  footer{border-top:1px solid var(--line);padding:42px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
  .policy-link{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
  .policy-link:hover{color:var(--accent)}
  footer .legal{font-size:11px;line-height:1.6;color:var(--muted);margin-top:8px}
  footer .copy{font-size:11px;color:var(--muted);margin-top:12px}
  footer .nav{gap:32px}
  .contacts{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:13px;line-height:1.6}
  .contacts__phone{font-weight:600;font-size:15px;color:var(--accent)}
  .contacts__phone:hover{color:var(--text)}
  .contacts small{font-size:11px;color:var(--muted)}
  .contacts__mail:hover{color:var(--accent)}
  .contact b.contact__mail{font-size:17px;word-break:break-all}

  /* modal */
  .modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:16px}
  .modal.open{display:flex}
  .modal__box{background:var(--bg-2);border:1px solid var(--line);width:100%;max-width:440px;padding:40px 36px;position:relative}
  .modal__box h3{font-size:24px;color:var(--accent);margin-bottom:8px}
  .modal__box p{color:var(--muted);font-size:13px;margin-bottom:26px}
  .modal__close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--muted);font-size:28px;line-height:1;cursor:pointer}
  .modal__close:hover{color:var(--accent)}
  .contact-list{display:grid;gap:10px}
  .contact{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;background:transparent;border:1px solid #3a3631;border-radius:2px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
  .contact:hover{border-color:var(--accent)}
  .contact i{flex:none;width:40px;height:40px;border:1px solid #4a443e;border-radius:50%;display:grid;place-items:center;color:var(--accent)}
  .contact i svg{width:17px}
  .contact span{display:flex;flex-direction:column;flex:1}
  .contact small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .contact b{font:400 19px var(--head);letter-spacing:.03em;margin-top:2px}
  .contact em{font-style:normal;font-size:11px;color:var(--accent)}

  /* карточка продукта */
  .col{cursor:pointer}
  .col:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
  .product{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:24px}
  .product.open{display:flex}
  .product__box{position:relative;background:var(--bg-2);border:1px solid var(--line);width:100%;max-width:1040px;max-height:calc(100vh - 48px);overflow:auto;display:grid;grid-template-columns:1fr 1fr}
  .product__media{padding:28px;display:flex;flex-direction:column;gap:10px}
  .product__main{position:relative;aspect-ratio:1/1;background:#0d0c0b;overflow:hidden}
  .product__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
  .product__main img.active{opacity:1}
  .product__thumbs{display:flex;flex-wrap:wrap;gap:10px}
  .product__thumbs button{width:84px}
  .product__thumbs button{padding:0;border:1px solid transparent;background:none;cursor:pointer;aspect-ratio:1/1;overflow:hidden;opacity:.6;transition:.2s}
  .product__thumbs button.active,.product__thumbs button:hover{opacity:1;border-color:var(--accent)}
  .product__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .product__info{padding:44px 40px 32px 12px;display:flex;flex-direction:column}
  .product__info h3{font-size:clamp(26px,3vw,36px);color:var(--accent);margin-bottom:10px}
  .product__sub{font-size:15px;color:var(--text);margin-bottom:22px}
  .product__lead{color:#cdc5bb;font-size:14px;margin-bottom:24px}
  .product__info h4{font:500 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .product__text{color:#bdb4a9;font-size:13.5px;line-height:1.7;margin-bottom:28px}
  .product__cta{margin-top:auto;display:flex;flex-direction:column;gap:22px}
  .product__cta .btn{align-self:flex-start;font-weight:600}
  .product__phone{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:2px}
  .product__phone small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .product__phone a{font:400 22px var(--head);letter-spacing:.03em;transition:color .2s}
  .product__phone a:hover{color:var(--accent)}
  .product .modal__close{z-index:2}
  @media (max-width:860px){
    .product{padding:0;align-items:stretch}
    .product__box{grid-template-columns:1fr;max-height:none;height:100%;border:0}
    .product__media{padding:0 0 10px}
    .product__thumbs{padding:0 16px}
    .product__info{padding:20px 16px 32px}
    .product .modal__close{position:fixed;right:10px;top:8px;width:40px;height:40px;border-radius:50%;background:rgba(18,17,16,.75);color:var(--text)}
  }

  /* reveal */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
  .reveal.in{opacity:1;transform:none}

  @media (min-width:861px){.hero h1{white-space:nowrap}}

  /* responsive */
  @media (max-width:1100px){
    .nav{gap:24px}
    .split{grid-template-columns:1fr}
    .reviews{grid-template-columns:1fr}
    .split__rule{display:none}
  }
  @media (max-width:860px){
    .wrap{padding:0 16px}
    .header .nav,.header-contact span{display:none}
    .header-contact a{font-size:14px;margin:0}
    .burger{display:grid}
    .header.menu-open{background:var(--bg)}
    .header.menu-open .nav{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 20px}
    .header.menu-open .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
    .hero{min-height:auto;padding-top:110px}
    .hero__img{background-position:70% center}
    .hero h1{font-size:34px;margin:14px 0 20px}
    .hero__img::after{background:linear-gradient(0deg,var(--bg) 10%,rgba(18,17,16,.82) 60%,rgba(18,17,16,.6))}
    .collections{grid-template-columns:repeat(2,1fr)}
    .collections--hits .col:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 3px)}
    .audience{grid-template-columns:1fr}
    .projects{grid-template-columns:repeat(2,1fr);height:auto}
    .projects figure{aspect-ratio:3/4}
    .sec-head{flex-direction:column;align-items:flex-start}
    .cta .wrap{grid-template-columns:1fr;gap:36px;padding-top:48px;padding-bottom:48px}
    .cta__logo{justify-self:start;max-width:240px}
    .cta__actions{grid-template-columns:1fr;gap:28px}
    footer .wrap{flex-direction:column;align-items:flex-start}
    footer .nav{flex-wrap:wrap;gap:16px 24px}
    .contacts{text-align:left;align-items:flex-start}
  }
  @media (max-width:480px){
    .collections{grid-template-columns:1fr}
    .collections--all{grid-template-columns:repeat(2,1fr)}
    .collections--all .col__body{padding:14px 12px 16px}
    .collections--all .col p{margin-bottom:12px}
    .collections--hits .col:last-child{width:100%}
    .hero__cta .btn{width:100%}
    .hero h1{font-size:28px}
    .review{padding:24px 20px 24px 60px}
    .review::before{left:16px}
  }

  /* каталог */
  .page-head{padding:150px 0 0}
  .page-head h1{font-size:clamp(36px,5vw,64px);color:var(--accent);margin:16px 0 18px}
  .page-head p{color:#cfc7bd;max-width:520px}
  .catalog{padding:48px 0 0}
  .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:56px;padding-bottom:4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid #3a3631;border-radius:2px;background:none;color:var(--text);font:500 13px var(--body);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
  .chip:hover{border-color:var(--accent)}
  .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .chip span{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}
  .collections--all{row-gap:6px}
  .nav a[aria-current="page"]{color:var(--accent);opacity:1}
  .chip{white-space:nowrap;flex:none}
  @media (max-width:860px){
    .page-head{padding-top:120px}.catalog{padding-top:32px}
    .filters{margin:0 -16px 40px;padding:0 16px 4px;-webkit-overflow-scrolling:touch}
    .filters::-webkit-scrollbar{display:none}
  }
  .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(140deg,#262320,#1a1917 70%);color:#6f675e;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .ph svg{width:30px;height:30px;opacity:.7}
  .col__tex .ph{position:absolute}
  .product__main .ph{display:none}
  .product__main.no-photo .ph{display:flex;font-size:12px}
  .product__main.no-photo .ph svg{width:44px;height:44px}
  .cat-group{padding:0}
  .cat-group+.cat-group{margin-top:56px}
  .cat-group__head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .cat-group__head h2{font-size:clamp(22px,2.4vw,30px)}
  .cat-group__head span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
  @media (max-width:860px){.cat-group+.cat-group{margin-top:40px}}