/* ===================================================================
   TRE · все стили сайта. Вставить один раз целиком:
   Настройки сайта → Вставка кода → Пользовательские CSS-стили.
   Собрано скриптом tilda/build.py, руками не править.

   Файл состоит из двух частей:
     1. СТРАНИЦА — стили кодовых вставок, всё под классом .tre
     2. ФОРМА    — вид полей штатной формы Tilda, под классом .tre-form
   Части независимы: первая не знает о форме, вторая — о кодовых блоках.

   ===================== ЧАСТЬ 1 · СТРАНИЦА ==========================
   Работает внутри блоков с кодом. Каждый селектор начинается с .tre,
   поэтому наружу, в блоки Tilda, эти правила не протекают.
   =================================================================== */
.tre{--accent-100:#F8E9E4; --accent-150:#EDCCC3; --accent-300:#B67166;
  --accent-500:#7F211A; --accent-600:#64120F; --accent-700:#4C050C; --accent-900:#330000;

  --ink-0:#FFFFFF;   --ink-100:#F5F4F2; --ink-150:#F4EAE0; --ink-200:#D6CEC6;
  --ink-250:#DCD7D4; --ink-275:#EDEBE9; --ink-300:#B8AFA9; --ink-400:#978D87;
  --ink-450:#877C76; --ink-500:#7A6D68; --ink-550:#6E615C; --ink-600:#5E4D48;
  --ink-700:#44302C; --ink-800:#2D1715; --ink-900:#1A0505; --ink-950:#030303;

  
  --bg-base:var(--ink-100);
  --bg-subtle:var(--ink-150);
  --bg-glass:rgba(220,215,212,.5);
  --bg-inverse:var(--accent-700);
  --bg-inverse-deep:var(--accent-900);
  --bg-accent:var(--accent-700);
  --bg-accent-subtle:var(--accent-100);
  --bg-chip:var(--ink-275);
  --bg-disabled:var(--ink-200);
  --bg-button-on-dark:var(--ink-0);
  --bg-button-on-photo:rgba(255,255,255,.8);

  --text-primary:var(--ink-950);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-550);
  --text-on-dark:var(--ink-100);
  --text-on-dark-muted:var(--ink-300);
  --text-on-accent:var(--ink-100);
  --text-accent:var(--accent-700);
  --text-accent-on-dark:var(--ink-150);
  --text-disabled:var(--ink-400);

  --border-subtle:var(--ink-200);
  --border-default:var(--ink-450);
  --border-strong:var(--ink-500);
  --border-accent:var(--accent-700);
  --border-on-dark:var(--accent-500);

  --state-hover:var(--accent-600);
  --state-pressed:var(--accent-900);
  --state-focus:var(--accent-500);

  --overlay:rgba(3,3,3,.35);
  --overlay-strong:rgba(3,3,3,.45);
  --scrim-top:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 100%);
  --scrim-top-hover:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%);
  --text-on-overlay:var(--ink-100);
  --text-on-overlay-muted:var(--ink-300);

  
  --font-display:"Alethia Pro","Playfair Display",Georgia,serif;
  --font-text:"Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,sans-serif;

  
  --s8:8px;    --s16:16px;  --s24:24px;  --s32:32px;  --s40:40px;
  --s48:48px;  --s64:64px;  --s80:80px;  --s96:96px;  --s120:120px;
  --s160:160px;--s200:200px;--s240:240px;

  
  --fast:150ms; --base:250ms; --slow:400ms; --slower:600ms; --reveal:800ms;
  --stagger:80ms; --stagger-nav:40ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  
  --pad:20px; --cols:4; --gutter:16px; --max:none;

  --r-card:24px; --r-pill:999px;

  --section-y:64px; --section-y-tight:48px; --block-gap:24px;
  --head-gap:16px;  --card-gap:16px;        --grid-gap-y:24px;

  
  --display-1:36px; --display-1-lh:40px; --display-1-ls:-2px;
  --display-2:32px; --display-2-lh:36px; --display-2-ls:-2px;
  --h1:28px;        --h1-lh:32px;        --h1-ls:-1px;
  --h2:24px;        --h2-lh:30px;        --h2-ls:-1px;
  --h3:20px;        --h3-lh:26px;        --h3-ls:-1px;
  --h4:18px;        --h4-lh:24px;        --h4-ls:-1px;
  
  --lead:18px;      --lead-lh:26px;      --lead-ls:-.18px;
  --body-l:16px;    --body-l-lh:24px;    --body-l-ls:0px;
  --body-m:14px;    --body-m-lh:20px;    --body-m-ls:0px;
  --body-s:14px;    --body-s-lh:20px;    --body-s-ls:0px;
  --caption:12px;   --caption-lh:18px;   --caption-ls:.12px;
  --overline:12px;  --overline-lh:16px;  --overline-ls:1.44px;
  --button:16px;    --button-lh:16px;    --button-ls:0px;
  --nav:16px;       --nav-lh:24px;       --nav-ls:0px;
  
  --btn-h:56px; --field-h:48px; --round-btn:52px; --chip-h:44px;}
@media (min-width:768px){.tre{--pad:32px; --cols:8; --gutter:16px;
  --r-card:32px;
  --section-y:80px; --section-y-tight:64px; --block-gap:32px;
  --head-gap:16px;  --card-gap:16px;        --grid-gap-y:24px;

  --display-1:48px; --display-1-lh:54px; --display-1-ls:-2px;
  --display-2:40px; --display-2-lh:46px; --display-2-ls:-2px;
  --h1:34px;        --h1-lh:40px;        --h1-ls:-2px;
  --h2:28px;        --h2-lh:34px;        --h2-ls:-1px;
  --h3:24px;        --h3-lh:30px;        --h3-ls:-1px;
  --h4:20px;        --h4-lh:26px;        --h4-ls:-1px;

  --lead:20px;      --lead-lh:30px;      --lead-ls:-.20px;
  --body-l:18px;    --body-l-lh:26px;
  --body-m:16px;    --body-m-lh:24px;
  --body-s:14px;    --body-s-lh:20px;
  --caption:12px;   --caption-lh:18px;   --caption-ls:.12px;
  --overline:12px;  --overline-lh:16px;  --overline-ls:1.44px;
  --button:16px;    --button-lh:16px;
  --nav:16px;       --nav-lh:24px;

  --btn-h:56px; --field-h:48px; --round-btn:52px; --chip-h:48px;}}
@media (min-width:1200px){.tre{--pad:48px; --cols:12; --gutter:24px; --max:1200px;
  --r-card:40px;
  --section-y:120px; --section-y-tight:96px; --block-gap:48px;
  --head-gap:20px;   --card-gap:20px;        --grid-gap-y:32px;

  --display-1:64px; --display-1-lh:72px; --display-1-ls:-2px;
  --display-2:48px; --display-2-lh:54px; --display-2-ls:-2px;
  --h1:40px;        --h1-lh:46px;        --h1-ls:-2px;
  --h2:32px;        --h2-lh:40px;        --h2-ls:-2px;
  --h3:26px;        --h3-lh:32px;        --h3-ls:-1px;
  --h4:20px;        --h4-lh:26px;        --h4-ls:-1px;

  
  --lead:24px;      --lead-lh:36px;      --lead-ls:-.24px;
  --body-l:20px;    --body-l-lh:30px;
  --body-m:18px;    --body-m-lh:26px;
  --body-s:16px;    --body-s-lh:24px;
  --caption:14px;   --caption-lh:20px;   --caption-ls:.14px;
  --overline:12px;  --overline-lh:16px;  --overline-ls:1.44px;
  --button:16px;    --button-lh:16px;
  --nav:16px;       --nav-lh:24px;

  --btn-h:56px; --field-h:48px; --round-btn:56px; --chip-h:52px;}}
@media (min-width:1440px){.tre{--pad:60px; --gutter:24px; --max:1440px;
  --r-card:48px;
  --section-y:144px; --section-y-tight:112px; --block-gap:56px;
  --head-gap:24px;   --card-gap:24px;         --grid-gap-y:40px;

  --display-1:80px; --display-1-lh:88px;
  --display-2:56px; --display-2-lh:62px;
  --h1:48px;        --h1-lh:54px;
  --h2:36px;        --h2-lh:44px;
  --h3:28px;        --h3-lh:34px;        --h3-ls:-1px;
  --h4:22px;        --h4-lh:28px;        --h4-ls:-1px;

  

  --btn-h:56px; --field-h:48px; --round-btn:56px; --chip-h:60px;}}
@media (min-width:1920px){.tre{--pad:80px; --gutter:40px; --max:1920px;
  --r-card:56px;
  --section-y:160px; --section-y-tight:120px; --block-gap:64px;
  --head-gap:24px;   --card-gap:24px;         --grid-gap-y:40px;

  --display-1:96px; --display-1-lh:104px;
  --display-2:64px; --display-2-lh:70px;
  --h1:56px;        --h1-lh:62px;
  --h2:40px;        --h2-lh:48px;
  --h3:32px;        --h3-lh:38px;        --h3-ls:-1px;
  --h4:24px;        --h4-lh:30px;        --h4-ls:-1px;

  

  --btn-h:60px; --field-h:56px; --round-btn:60px; --chip-h:60px;}}
.tre .container{width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);}
.tre .grid{display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--gutter);
  row-gap:var(--grid-gap-y);}
@media (prefers-reduced-motion:reduce){.tre{--fast:1ms; --base:1ms; --slow:1ms; --slower:1ms; --reveal:1ms;
    --stagger:0ms; --stagger-nav:0ms;}
.tre,.tre *,.tre *::before,.tre *::after{animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;}}
.tre,.tre *,.tre *::before,.tre *::after{box-sizing:border-box}
.tre{scroll-behavior:smooth; scroll-padding-top:160px;
  
  scrollbar-width:none; -ms-overflow-style:none;}
.tre::-webkit-scrollbar{width:0;height:0;display:none}
.tre{margin:0; width:100%;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-text);
  font-size:var(--body-m); line-height:var(--body-m-lh);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;}
.tre img,.tre svg{display:block;max-width:100%}
.tre img,.tre svg{pointer-events:none}
.tre .card-project__arrow{pointer-events:auto}
.tre ul{margin:0;padding:0;list-style:none}
.tre p,.tre h1,.tre h2,.tre h3,.tre h4,.tre figure{margin:0}
.tre a{color:inherit;text-decoration:none}
.tre button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.tre hr{border:0}
.tre :focus-visible{outline:2px solid var(--state-focus);outline-offset:2px;transition:none}
.tre .display-1{font-family:var(--font-display);font-weight:400;font-size:var(--display-1);line-height:var(--display-1-lh);letter-spacing:var(--display-1-ls)}
.tre .display-2{font-family:var(--font-display);font-weight:400;font-size:var(--display-2);line-height:var(--display-2-lh);letter-spacing:var(--display-2-ls)}
.tre .h1{font-family:var(--font-display);font-weight:400;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:var(--h1-ls)}
.tre .h2{font-family:var(--font-display);font-weight:400;font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls)}
.tre .h3{font-family:var(--font-display);font-weight:400;font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:var(--h3-ls)}
.tre .h4{font-family:var(--font-display);font-weight:400;font-size:var(--h4);line-height:var(--h4-lh);letter-spacing:var(--h4-ls)}
.tre .lead{font-size:var(--lead);line-height:var(--lead-lh);letter-spacing:var(--lead-ls)}
.tre .body-l{font-size:var(--body-l);line-height:var(--body-l-lh)}
.tre .body-m{font-size:var(--body-m);line-height:var(--body-m-lh)}
.tre .body-s{font-size:var(--body-s);line-height:var(--body-s-lh)}
.tre .caption{font-size:var(--caption);line-height:var(--caption-lh);letter-spacing:var(--caption-ls)}
.tre .overline{font-size:var(--overline);line-height:var(--overline-lh);letter-spacing:var(--overline-ls);font-weight:500;text-transform:uppercase;color:var(--text-muted)}
.tre .nav{font-size:var(--nav);line-height:var(--nav-lh)}
.tre .stub{color:var(--text-muted)}
.tre .fill-w{opacity:.3;transition:opacity var(--base) var(--ease)}
.tre .fill-w.is-on{opacity:1}
.tre .fill-text em{font-style:italic}
.tre{--colw:calc((100vw - 2*var(--pad) - (var(--cols) - 1)*var(--gutter))/var(--cols));
  
  --hero-cycle:6000ms;}
.tre .container{max-width:none}
@media (min-width:1200px){.tre{--scroll-pad:160px;
  --btn-min:240px;      
  --capsule-top:40px;   
  --logo-hero:52px;     
  --logo-footer:56px;   
  --scrim-card:240px;   
  --card-pad:var(--s32);
  --card-title-top:48px;
  --about-pad:var(--s48);
  --about-h:676px;      
  --avatar:88px;
  --arrow-w:68px;}}
@media (min-width:1440px){.tre{--scroll-pad:180px;
  --card-title-top:60px;
  --capsule-top:48px;
  --logo-hero:62px;
  --logo-footer:64px;
  --about-pad:var(--s64);
  --about-h:810px;
  --avatar:110px;}}
@media (min-width:1920px){.tre{--scroll-pad:200px;
  --btn-min:264px;
  --capsule-top:60px;
  --logo-hero:82px;
  --logo-footer:82px;
  --scrim-card:320px;
  --card-pad:var(--s40);
  --card-title-top:78px;
  --about-pad:var(--s80);
  --about-h:1080px;
  --arrow-w:84px;}}
.tre .section{padding-block:var(--section-y)}
.tre .grid > *{grid-column:1/-1}
.tre .ph{position:relative; display:block; overflow:hidden;
  background:var(--bg-disabled);
  border-radius:var(--r-card);}
.tre .ph::after{content:attr(data-ph);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--body-s); line-height:var(--body-s-lh);
  color:var(--text-secondary);}
.tre .ph img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.tre .btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s8);
  height:var(--btn-h); padding-inline:var(--s40);
  border-radius:var(--r-pill);
  font-size:var(--button); line-height:var(--button-lh); font-weight:500;
  transition:background-color var(--base) var(--ease), color var(--base) var(--ease),
             border-color var(--base) var(--ease), transform var(--fast) var(--ease);
  width:100%;}
.tre .btn:active{transform:scale(.98)}
.tre .btn--primary{background:var(--bg-accent);color:var(--text-on-accent)}
.tre .btn--primary:hover{background:var(--state-hover)}
.tre .btn--primary:active{background:var(--state-pressed)}
.tre .btn--light{background:var(--bg-button-on-dark);color:var(--text-accent)}
.tre .btn--light:hover{background:var(--bg-accent-subtle)}
.tre .btn--photo{background:var(--bg-button-on-photo);color:var(--text-primary)}
.tre .btn--photo:hover{background:var(--bg-button-on-dark)}
.tre .btn--outline{border:1px solid var(--border-strong);color:var(--text-primary)}
.tre .btn--outline:hover{border-color:var(--text-accent);color:var(--text-accent)}
.tre .round-btn{position:relative; flex:0 0 auto;
  width:var(--round-btn); height:var(--round-btn);
  border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--base) var(--ease);}
.tre .round-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tre .round-btn--menu{background:var(--bg-accent);color:var(--text-on-accent)}
.tre .round-btn--menu:hover{background:color-mix(in srgb,var(--bg-accent) 65%,var(--bg-button-on-dark))}
.tre .round-btn--menu svg{width:24px;height:24px;transition:transform var(--base) var(--ease),opacity var(--base) var(--ease)}
.tre .round-btn--menu .icon-close{position:absolute;opacity:0;transform:rotate(-90deg)}
.tre .round-btn--menu[aria-expanded="true"]{background:var(--bg-button-on-dark);color:var(--text-accent)}
.tre .round-btn--menu[aria-expanded="true"] .icon-menu{opacity:0;transform:rotate(90deg)}
.tre .round-btn--menu[aria-expanded="true"] .icon-close{opacity:1;transform:rotate(0)}
.tre .preloader{position:fixed; inset:0; z-index:100;
  background:var(--bg-base);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(0);
  transition:transform var(--slower) var(--ease-out);}
.tre .preloader.is-hiding .preloader__num{opacity:0;transition:opacity 200ms var(--ease)}
.tre .preloader.is-gone{transform:translateY(-100%)}
.tre .preloader__num{color:var(--text-primary)}
.tre .capsule{position:fixed; z-index:40;
  inset:auto 20px 20px 20px;
  height:76px; padding:var(--s8);
  display:flex; align-items:center; gap:var(--s8);
  background:var(--bg-glass);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-radius:var(--r-pill);}
.tre .capsule__logo{display:none}
.tre .capsule__logo img,.tre .capsule__logo svg{height:16px;width:auto}
.tre .capsule__logo .logo-light{display:none}
.tre .capsule.on-dark .logo-dark{display:none}
.tre .capsule.on-dark .logo-light{display:block}
.tre .capsule__cta{flex:1 1 auto;min-width:0}
.tre .menu{position:fixed;inset:0;z-index:39}
.tre .menu[hidden]{display:none}
.tre .menu__scrim{position:absolute; inset:0;
  background:var(--bg-inverse);
  clip-path:circle(0 at var(--cx,50%) var(--cy,100%));
  transition:clip-path var(--slow) var(--ease-out);}
.tre .menu.is-open .menu__scrim{clip-path:circle(150% at var(--cx,50%) var(--cy,100%))}
.tre .menu__inner{position:relative; height:100%;
  display:grid; grid-template-rows:1fr auto 1fr;
  justify-items:center; align-items:center;
  
  padding:0 var(--s40) 116px;
  color:var(--text-on-dark);}
.tre .menu__logo{grid-row:1}
.tre .menu__nav{grid-row:2}
.tre .menu__social{grid-row:3}
.tre .menu__logo{opacity:0;transition:opacity var(--base) var(--ease) 150ms}
.tre .menu__logo img,.tre .menu__logo svg{height:36px;width:auto}
.tre .menu.is-open .menu__logo{opacity:1}
.tre .menu__nav{display:flex;flex-direction:column;align-items:center;gap:var(--s24)}
.tre .menu__nav a{font-size:32px;line-height:24px}
.tre .menu__nav a,.tre .menu__social a{opacity:0; transform:translateY(16px);
  transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out), color var(--fast) var(--ease);}
.tre .menu.is-open .menu__nav a,.tre .menu.is-open .menu__social a{opacity:1;transform:none}
.tre .menu.is-open .menu__nav a:nth-child(1){transition-delay:0ms}
.tre .menu.is-open .menu__nav a:nth-child(2){transition-delay:calc(var(--stagger-nav)*1)}
.tre .menu.is-open .menu__nav a:nth-child(3){transition-delay:calc(var(--stagger-nav)*2)}
.tre .menu.is-open .menu__nav a:nth-child(4){transition-delay:calc(var(--stagger-nav)*3)}
.tre .menu.is-open .menu__nav a:nth-child(5){transition-delay:calc(var(--stagger-nav)*4)}
.tre .menu.is-open .menu__nav a:nth-child(6){transition-delay:calc(var(--stagger-nav)*5)}
.tre .menu.is-open .menu__social a{transition-delay:calc(var(--stagger-nav)*7)}
.tre .menu__nav a:hover{color:var(--text-accent-on-dark)}
.tre .menu__social{display:flex;gap:20px}
.tre .social{display:block}
.tre .social img,.tre .social svg{width:40px;height:40px}
.tre .social:hover{opacity:.8}
.tre .hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--bg-inverse-deep)}
.tre .hero__slides{position:absolute;inset:0}
.tre .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--reveal) var(--ease);background:var(--bg-disabled)}
.tre .hero__slide.is-active{opacity:1}
.tre .hero__slide img{width:100%;height:100%;object-fit:cover}
.tre .hero::after{content:"";position:absolute;inset:0;background:var(--overlay)}
.tre .hero__content{position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s32); padding-inline:var(--pad);
  color:var(--text-on-overlay);}
.tre .hero__logo{width:83%}
.tre .hero__logo img,.tre .hero__logo svg{width:100%;height:auto}
.tre .hero__tagline{max-width:100%;text-align:center;font-family:var(--font-display);font-size:var(--h4);line-height:var(--h4-lh);letter-spacing:var(--h4-ls)}
.tre .hero__dots{display:flex;gap:14px}
.tre .dot{position:relative;width:12px;height:12px;border-radius:var(--r-pill);background:var(--text-on-overlay);opacity:.4;transition:opacity var(--base) var(--ease)}
.tre .dot::before{content:"";position:absolute;inset:-16px}
.tre .dot.is-active{opacity:1}
.tre .manifest__text{color:var(--text-accent)}
.tre .sec-head{align-items:end;margin-bottom:var(--block-gap)}
.tre .sec-head__text .overline{margin-bottom:var(--head-gap)}
.tre .sec-head__cta{margin-top:var(--s24)}
.tre .carousel{overflow-x:auto; overflow-y:hidden;
  
  margin-inline-end:calc(-1*var(--pad));
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  user-select:none; -webkit-user-select:none;}
.tre .carousel::-webkit-scrollbar{display:none}
.tre .carousel__track{display:flex;gap:var(--s16);width:max-content;padding-inline-end:var(--pad)}
.tre .card-project{flex:0 0 calc(100vw - 2*var(--pad) - 55px);min-width:0;scroll-snap-align:start}
.tre .card-project a,.tre .card-project img{-webkit-user-drag:none;user-select:none}
.tre .card-project > a{position:relative; display:block; overflow:hidden;
  border-radius:var(--r-card);
  aspect-ratio:3/4;
  color:var(--text-on-overlay);}
.tre .card-project__media{position:absolute;inset:0;border-radius:0}
.tre .card-project__media img{transition:transform var(--slower) var(--ease-out)}
.tre .card-project > a::after{content:"";position:absolute;inset:0 0 auto 0;z-index:2;height:180px;background:var(--scrim-top);transition:opacity var(--base) var(--ease)}
.tre .card-project__body{position:relative; z-index:3;
  display:flex; flex-direction:column; gap:var(--s16);
  padding:var(--s32) 20px 20px;
  text-align:center;}
.tre .card-project__title,.tre .card-project__excerpt{width:100%;max-width:none}
.tre .card-project__title{transition:transform var(--base) var(--ease-out)}
.tre .card-project__excerpt{display:none;color:var(--text-on-overlay)}
.tre .card-project a:active .card-project__arrow{transform:translateX(4px)}
.tre .card-project__arrow{position:absolute; z-index:3; right:20px; bottom:20px;
  cursor:pointer;
  width:60px; height:auto;
  transition:transform var(--base) var(--ease);}
.tre .services__head .overline{margin-bottom:var(--head-gap)}
.tre .services__lead{color:var(--text-accent)}
.tre .services__grid{margin-top:var(--block-gap)}
.tre .card-service{position:relative; overflow:hidden;
  aspect-ratio:3/4;
  border-radius:var(--r-card);
  color:var(--text-on-overlay);
  padding:20px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s24);}
.tre .card-service__media{position:absolute;inset:0;border-radius:0}
.tre .card-service__media img{transition:transform var(--slower) var(--ease-out)}
.tre .card-service::after{content:"";position:absolute;inset:0;z-index:2;background:var(--overlay);transition:background-color var(--base) var(--ease)}
.tre .card-service__top,.tre .card-service__bottom{position:relative;z-index:3;display:flex;flex-direction:column;gap:var(--s24)}
.tre .card-service__bullets{display:none;flex-direction:column;gap:var(--s8);color:var(--text-on-overlay)}
.tre .card-service__bullets .stub{color:var(--text-on-overlay-muted)}
.tre .card-service__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);flex-wrap:wrap}
.tre .card-service__cta{width:100%}
.tre .card-service__term{display:none;   
  background:var(--bg-accent); color:var(--text-on-accent);
  border-radius:var(--r-pill); padding:var(--s8) var(--s24);}
.tre .about .container{max-width:none;padding-inline:0}
.tre .about__card{background:var(--bg-inverse);
  border-radius:var(--r-card);
  padding:var(--s24);
  color:var(--text-on-dark);}
.tre .about__grid{row-gap:var(--block-gap)}
.tre .about__text{display:flex;flex-direction:column}
.tre .about__head .overline{color:var(--text-on-dark-muted);margin-bottom:var(--head-gap)}
.tre .about__title{margin-bottom:var(--s24)}
.tre .about__lead{color:var(--text-on-dark)}
.tre .about__bottom{margin-top:auto}
.tre .about__rule{height:1px;background:var(--text-on-dark);margin:0 0 var(--s32)}
.tre .partners{display:flex;gap:var(--s16)}
.tre .partner{border-radius:var(--r-pill);transition:opacity var(--base) var(--ease)}
.tre .partner__ph{display:block; position:relative; overflow:hidden;
  width:72px; height:72px; border-radius:var(--r-pill);
  background:var(--bg-disabled);
  
  box-shadow:0 0 0 0 var(--bg-button-on-dark);
  transition:box-shadow var(--base) var(--ease);}
.tre .partner:focus-visible .partner__ph,.tre .partner[aria-selected="true"] .partner__ph{box-shadow:0 0 0 4px var(--bg-button-on-dark)}
@media (hover:hover){.tre .partner:hover .partner__ph{box-shadow:0 0 0 4px var(--bg-button-on-dark)}}
.tre .partner{position:relative}
.tre .partner::after{content:""; position:absolute; inset:0; z-index:2;
  border-radius:var(--r-pill);
  box-shadow:0 0 0 4px var(--bg-button-on-dark);
  opacity:0; pointer-events:none;}
@keyframes ring-pulse{0%,100%{opacity:0}50%{opacity:1}}
.tre .partners:not(.has-active) .partner:first-child::after{animation:ring-pulse 2.4s var(--ease) infinite;}
.tre .partner__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tre .partners.has-active .partner[aria-selected="false"]{opacity:.6}
.tre .partner-panel{margin-top:var(--s24)}
.tre .partner-panel__name{opacity:0;transform:translateY(12px);transition:opacity var(--base) var(--ease) 150ms,transform var(--base) var(--ease) 150ms}
.tre .partner-panel__bio{opacity:0;transform:translateY(12px);transition:opacity var(--base) var(--ease) 200ms,transform var(--base) var(--ease) 200ms;color:var(--text-on-dark-muted)}
.tre .partner-panel.is-open .partner-panel__name,.tre .partner-panel.is-open .partner-panel__bio{opacity:1;transform:none}
.tre .partner-panel .stub{color:var(--text-on-dark-muted)}
.tre .about__photo{aspect-ratio:335/280}
.tre .about__photo img{opacity:0;transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out)}
.tre .about__photo img.is-active{opacity:1}
.tre .about__photo img[data-partner="all"]{object-position:50% 8%}
.tre .journal__grid{row-gap:var(--s32)}
.tre .card-article__media{aspect-ratio:4/3;margin-bottom:var(--card-gap)}
.tre .card-article__media img{transition:transform var(--base) var(--ease-out)}
.tre .card-article__title{margin-bottom:var(--s8);transition:color var(--base) var(--ease)}
.tre .card-article__excerpt{color:var(--text-secondary);margin-bottom:var(--s8)}
.tre .card-article__date{color:var(--text-muted)}
.tre .card-article a:hover .card-article__title{color:var(--text-accent)}
.tre .card-article a:hover .card-article__media img{transform:scale(1.04)}
.tre .faq__head > h2{margin-bottom:var(--block-gap)}
.tre .faq__cta{margin-top:var(--block-gap)}
.tre .faq__item{border-bottom:1px solid var(--border-subtle);transition:border-color var(--fast) var(--ease)}
.tre .faq__item:hover{border-color:var(--border-strong)}
.tre .faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s16);
  padding-block:var(--s24); text-align:left;
  font-family:var(--font-text); font-weight:500;
  font-size:var(--h4); line-height:var(--h4-lh);
  transition:color var(--fast) var(--ease);}
.tre .faq__q:hover{color:var(--text-accent)}
.tre .faq__sign{flex:0 0 auto;color:var(--text-accent)}
.tre .faq__sign svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.tre .faq__sign-v{transform-origin:center;transition:transform var(--base) var(--ease),opacity var(--base) var(--ease)}
.tre .faq__q[aria-expanded="true"] .faq__sign-v{transform:rotate(90deg);opacity:0}
.tre .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--base) var(--ease)}
.tre .faq__a-inner{overflow:hidden}
.tre .faq__a-inner p{opacity:0;transition:opacity var(--fast) var(--ease) 100ms;padding-bottom:var(--s24);color:var(--text-secondary)}
.tre .faq__item.is-open .faq__a{grid-template-rows:1fr}
.tre .faq__item.is-open .faq__a-inner p{opacity:1}
.tre .form-section{padding-block:0}
.tre .form-section .container{max-width:none;padding-inline:0}
.tre .form-panel{background:var(--bg-inverse);
  color:var(--text-on-dark);
  border-radius:var(--r-card);
  padding:var(--section-y) var(--pad);}
.tre .form__title{margin-bottom:var(--s24)}
.tre .form__subtitle{color:var(--text-on-dark-muted)}
.tre .form__fields{display:grid;grid-template-columns:1fr;column-gap:var(--gutter);row-gap:var(--s32);margin-top:var(--block-gap)}
.tre .field{display:flex;flex-direction:column;gap:var(--s8)}
.tre .field label{color:var(--text-on-dark-muted)}
.tre .field__control{height:var(--field-h); padding:0 0 var(--s16);
  background:none; border:0; border-bottom:1px solid var(--border-on-dark);
  color:var(--text-on-dark);
  font-family:var(--font-text); font-size:var(--body-l); line-height:var(--body-l-lh);
  border-radius:0; appearance:none;
  transition:border-color var(--fast) var(--ease);}
.tre .field__control::placeholder{color:var(--text-on-dark-muted)}
.tre .field__control:focus{outline:none;border-bottom:2px solid var(--text-accent-on-dark)}
.tre .field__control:focus-visible{outline:none}
.tre select.field__control{background:none;cursor:pointer}
.tre select.field__control option{color:var(--text-primary)}
.tre .consent{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s48);color:var(--text-on-dark-muted);cursor:pointer}
.tre .consent input{position:absolute;opacity:0;width:0;height:0}
.tre .consent__box{flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  border:1px solid var(--border-on-dark); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  transition:background-color var(--base) var(--ease),border-color var(--base) var(--ease);}
.tre .consent__box svg{width:14px;height:14px;fill:none;stroke:var(--bg-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--fast) var(--ease)}
.tre .consent input:checked + .consent__box{background:var(--bg-button-on-dark);border-color:var(--bg-button-on-dark)}
.tre .consent input:checked + .consent__box svg{opacity:1}
.tre .consent input:focus-visible + .consent__box{outline:2px solid var(--text-accent-on-dark);outline-offset:2px}
.tre .consent a{color:var(--text-accent-on-dark);text-decoration:underline}
.tre .form__submit{margin-top:var(--s40)}
.tre .footer{padding-block:var(--section-y-tight) 116px}
.tre .footer .grid{row-gap:var(--s32)}
.tre .footer__left{display:flex;flex-direction:column;gap:var(--s8)}
.tre .footer__logo{margin-bottom:var(--s24)}
.tre .footer__logo img,.tre .footer__logo svg{width:100%;height:auto}
.tre .footer__right{display:flex;flex-direction:column;gap:var(--s8)}
.tre .footer__contact{font-family:var(--font-display);color:var(--text-accent)}
.tre .footer__muted{color:var(--text-muted)}
.tre .footer__secondary{color:var(--text-secondary)}
.tre .footer__office{margin-top:var(--s32);display:flex;flex-direction:column;gap:var(--s8)}
.tre .footer__policy{color:var(--text-muted);text-decoration:underline}
.tre .footer__policy:hover{color:var(--text-accent)}
.tre .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out)}
.tre .reveal.is-in{opacity:1;transform:none}
.tre .services__grid > *,.tre .journal__grid > *{opacity:0;transform:translateY(16px);transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out)}
.tre .is-in .services__grid > *,.tre .is-in .journal__grid > *{opacity:1;transform:none}
.tre .is-in .services__grid > :nth-child(1),.tre .is-in .journal__grid > :nth-child(1){transition-delay:100ms}
.tre .is-in .services__grid > :nth-child(2),.tre .is-in .journal__grid > :nth-child(2){transition-delay:calc(100ms + var(--stagger))}
.tre .is-in .services__grid > :nth-child(3),.tre .is-in .journal__grid > :nth-child(3){transition-delay:calc(100ms + 2*var(--stagger))}
.tre .is-in .services__grid > :nth-child(n+4),.tre .is-in .journal__grid > :nth-child(n+4){transition-delay:calc(100ms + 3*var(--stagger))}
@media (min-width:420px){.tre .manifest__text,.tre .services__lead,.tre .about__title{text-indent:calc(var(--colw) + var(--gutter));}}
@media (min-width:768px){.tre .card-service{grid-column:span 4}
.tre .card-article{grid-column:span 4}
.tre .card-project{flex:0 0 calc(3.5*var(--colw) + 2.5*var(--gutter))}
.tre{--btn-min:240px}
.tre .btn{width:auto;min-width:var(--btn-min)}
.tre .sec-head__text{grid-column:1/span 5}
.tre .sec-head__cta{grid-column:6/-1;grid-row:1;justify-self:end;align-self:end;margin-top:0}
.tre .faq__cta{justify-self:center;margin-top:var(--s40)}
.tre .form__submit{display:flex;margin-inline:auto}}
@media (min-width:1200px){.tre{scroll-padding-top:var(--scroll-pad)}
.tre .btn{width:auto;min-width:var(--btn-min)}
.tre .s4{grid-column:span 4}
.tre .s5{grid-column:span 5}
.tre .s6{grid-column:span 6}
.tre .s8{grid-column:span 8}
.tre .s10{grid-column:span 10}
.tre .capsule{inset:var(--capsule-top) auto auto 50%;
    transform:translateX(-50%);
    width:auto;
    gap:14px;
    padding:var(--s8);}
.tre .capsule__logo{display:flex;align-items:center;margin-inline:40px 0}
.tre .capsule__cta{flex:0 0 auto;width:var(--btn-min);padding-inline:26px}
.tre .menu__scrim{clip-path:none;opacity:0;transition:opacity 300ms var(--ease)}
.tre .menu.is-open .menu__scrim{clip-path:none;opacity:1}
.tre .menu__inner{padding-bottom:0}
.tre .social img,.tre .social svg{width:60px;height:60px}
.tre .menu__logo{display:none}
@keyframes breathe{from{transform:scale(1.06)}to{transform:scale(1)}}
.tre .hero__slide.is-active img{animation:breathe var(--hero-cycle) linear forwards}
.tre .hero__content{gap:var(--s48)}
.tre .hero__logo{width:auto}
.tre .hero__logo img,.tre .hero__logo svg{height:var(--logo-hero);width:auto}
.tre .hero__tagline{font-family:var(--font-display);
    font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:var(--h3-ls);
    max-width:calc(4*var(--colw) + 3*var(--gutter));}
.tre .manifest__text,.tre .services__lead{text-indent:calc(2*var(--colw) + 2*var(--gutter))}
.tre .sec-head__cta{grid-column:7/-1;grid-row:1;justify-self:end;align-self:end;width:auto;min-width:var(--btn-min);margin-top:0}
.tre .sec-head__text{grid-row:1}
.tre .card-project{flex:0 0 calc(4*var(--colw) + 3*var(--gutter))}
.tre .carousel{scroll-snap-type:none;cursor:grab}
.tre .carousel.is-dragging{cursor:grabbing;scroll-behavior:auto}
.tre .carousel__track{gap:var(--gutter)}
.tre .card-project__body{padding:var(--card-pad);padding-top:var(--card-title-top)}
.tre .card-project__excerpt{opacity:0;transform:translateY(8px);transition:opacity var(--base) var(--ease) 60ms,transform var(--base) var(--ease) 60ms}
.tre .card-project > a:hover .card-project__excerpt{opacity:1;transform:none}
.tre .card-project > a:hover .card-project__media img{transform:scale(1.06)}
.tre .card-project > a:hover::after{background:var(--scrim-top-hover)}
.tre .card-project > a:hover .card-project__title{transform:translateY(-8px)}
.tre .card-project > a:hover .card-project__arrow{transform:translateX(4px)}
.tre .card-project__arrow{right:var(--card-pad);bottom:var(--card-pad);width:var(--arrow-w)}
.tre .card-project > a::after{height:var(--scrim-card)}
.tre .card-service{padding:var(--card-pad);aspect-ratio:auto;min-height:calc(6*var(--colw) + 5*var(--gutter))}
.tre .card-service:hover .card-service__media img{transform:scale(1.04)}
.tre .card-service:hover::after{background:var(--overlay-strong)}
.tre .card-project__excerpt{display:block}
.tre .card-service__bullets{display:flex}
.tre .card-service__term{display:block}
.tre .partner::after{animation:none}
.tre .card-service__excerpt{max-width:calc(3*var(--colw) + 2*var(--gutter))}
.tre .card-service__cta{width:auto;min-width:var(--btn-min)}
.tre .card-service__bullets,.tre .card-service__term{opacity:0; transform:translateY(16px);
    transition:opacity var(--base) var(--ease-out),transform var(--base) var(--ease-out);}
.tre .card-service__term{transition-delay:60ms}
.tre .card-service:hover .card-service__bullets,.tre .card-service:hover .card-service__term,.tre .card-service:focus-within .card-service__bullets,.tre .card-service:focus-within .card-service__term{opacity:1;transform:none}
.tre .about{padding-block:var(--s40)}
.tre .about__card{padding:var(--about-pad);min-height:var(--about-h)}
.tre .about__grid{min-height:calc(var(--about-h) - 2*var(--about-pad));align-items:stretch}
.tre .about__title{text-indent:calc(var(--colw) + var(--gutter))}
.tre .about__text{min-height:auto}
.tre .about__text > *{flex-shrink:0}
.tre .about__media{grid-column:7/span 6;min-height:0;display:grid}
.tre .about__photo{aspect-ratio:auto;height:100%}
.tre .about__photo img{transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out),object-position var(--slower) var(--ease-out)}
.tre .about__photo img[data-partner="all"]{object-position:50% 50%}
.tre .about__photo img.is-active[data-partner="all"]{transform:scale(1)}
.tre .about__photo img.is-active:not([data-partner="all"]){transform:scale(1.1);object-position:50% 35%}
.tre .partners{gap:var(--s24)}
.tre .partner__ph{width:var(--avatar);height:var(--avatar)}
.tre .journal__grid{row-gap:var(--grid-gap-y)}
.tre .faq__head{grid-column:span 5}
.tre .faq__head > h2{margin-bottom:var(--s40)}
.tre .faq__list{grid-column:7/span 6}
.tre .faq__cta{grid-column:7/span 6;justify-self:start;width:auto;min-width:var(--btn-min);margin-top:var(--s40)}
.tre .faq__q{padding-block:var(--s32)}
.tre .form{grid-column:3/span 8}
.tre .form__fields{grid-template-columns:repeat(2,1fr);row-gap:var(--s40)}
.tre .field--full{grid-column:1/-1}
.tre .form__submit{width:auto;min-width:var(--btn-min);margin-inline:auto;display:flex}
.tre .footer{padding-block:var(--section-y-tight) var(--section-y-tight)}
.tre .footer__right{grid-column:9/span 4}
.tre .footer .grid{row-gap:0}
.tre .footer__logo img,.tre .footer__logo svg{height:var(--logo-footer);width:auto}
.tre .footer__office{margin-top:36px;gap:var(--s8)}
.tre .reveal{transform:translateY(24px)}
.tre .services__grid > *,.tre .journal__grid > *{transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.tre{scroll-behavior:auto}
.tre .reveal,.tre .services__grid > *,.tre .journal__grid > *{opacity:1;transform:none}
.tre .fill-w{opacity:1}
.tre .card-project__excerpt,.tre .card-service__bullets,.tre .card-service__term{opacity:1;transform:none}
.tre .menu__nav a,.tre .menu__social a,.tre .menu__logo{opacity:1;transform:none}
.tre .partner-panel__name,.tre .partner-panel__bio{opacity:1;transform:none}
.tre .partner::after{animation:none}}
.tre{margin-left:calc(50% - 50vw);width:100vw;max-width:100vw}
.tre .fill-text em{font-style:normal}
.tre{--font-display:"AlethiaPro","Alethia Pro","Playfair Display",Georgia,serif;--font-text:"InterTight","Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,sans-serif}

/* ===================================================================

   ===================== ЧАСТЬ 2 · ФОРМА =============================

   Ниже — вид формы. Она собрана не кодовой вставкой, а штатным блоком
   Tilda, поэтому селекторы другие: не .tre, а .tre-form на обёртке
   блока. Без класса на блоке эта часть ни с чем не совпадает и внешне
   ничего не меняет — см. tilda/form/README.md.

   Источник — tilda/form/form-css.txt, правится там.
   =================================================================== */

/* ===================================================================
   TRE · форма. Отдельно не вставляется: build.py дописывает этот файл
   второй частью в site-css.txt.

   Работает на оба варианта сборки. Блоку формы в его настройках,
   в поле BLOCK CSS CLASS NAME, задаётся одно имя — uc-tre-form.
   Префикс uc- обязателен: другие имена Tilda не принимает.

   Второго класса нет намеренно: в поле помещается одно имя. Штатный
   блок от Zero Block отличается наличием холста .t396 внутри, поэтому
   панель (фон, радиус, поля) рисуется только там, где его нет —
   :not(:has(.t396)). В Zero Block панель собрана фигурой в макете.

   Разметку полей Tilda отдаёт одинаковую в обоих случаях
   (.t-input-group / .t-input-title / .t-input / .t-select /
   .t-checkbox / .t-submit), поэтому вид полей задаётся один раз.

   !important здесь не украшение: Tilda пишет свои правила с id
   записи (#rec123 .t-input), а это специфичнее любого класса.
   =================================================================== */

/* ---------- токены: те же значения, что в src/tokens.css ---------- */
.uc-tre-form{
  /* имена как в менеджере шрифтов Tilda — без пробела; наши идут следом */
  --font-display:"AlethiaPro","Alethia Pro","Playfair Display",Georgia,serif;
  --font-text:"InterTight","Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,sans-serif;

  --bg-inverse:#4C050C;      --text-on-dark:#F5F4F2;
  --text-on-dark-muted:#B8AFA9;
  --border-on-dark:#7F211A;  --text-accent-on-dark:#F4EAE0;
  --btn-bg:#FFFFFF;          --btn-bg-hover:#F8E9E4;
  --text-accent:#4C050C;     --text-primary:#030303;
  --text-error:#B67166;

  --s8:8px; --s16:16px; --s24:24px; --s32:32px; --s40:40px; --s48:48px;
  --fast:150ms; --base:250ms; --ease:cubic-bezier(.4,0,.2,1);

  --pad:20px; --gutter:16px; --max:100vw;
  --r-card:24px; --r-pill:999px;
  --section-y:64px; --block-gap:24px;
  /* на телефоне кнопка тянется во всю ширину шириной, а не минимумом:
     с 768 ширина становится auto, и минимум должен пропасть вместе с ней */
  --field-h:48px; --btn-h:56px; --btn-min:auto;

  --h2:24px;     --h2-lh:30px;     --h2-ls:-1px;
  --body-l:16px; --body-l-lh:24px;
  --caption:12px;--caption-lh:18px;--caption-ls:.12px;
  --button:16px;
}
@media (min-width:768px){.uc-tre-form{
  --pad:32px; --gutter:16px;
  --r-card:32px; --section-y:80px; --block-gap:32px;
  --h2:28px; --h2-lh:34px;
  --body-l:18px; --body-l-lh:26px;
}}
@media (min-width:1200px){.uc-tre-form{
  --pad:48px; --gutter:24px; --max:1200px;
  --r-card:40px; --section-y:120px; --block-gap:48px;
  --btn-min:240px;
  --h2:32px; --h2-lh:40px; --h2-ls:-2px;
  /* текст выше 1200 не растёт — на 1440 и 1920 эти строки не повторяются */
  --body-l:20px; --body-l-lh:30px;
  --caption:14px; --caption-lh:20px; --caption-ls:.14px;
}}
@media (min-width:1440px){.uc-tre-form{
  --pad:60px; --gutter:24px; --max:1440px;
  --r-card:48px; --section-y:144px; --block-gap:56px;
  --h2:36px; --h2-lh:44px;
}}
@media (min-width:1920px){.uc-tre-form{
  --pad:80px; --gutter:40px; --max:1920px;
  --r-card:56px; --section-y:160px; --block-gap:64px;
  --field-h:56px; --btn-h:60px; --btn-min:264px;
  --h2:40px; --h2-lh:48px;
}}

/* Ширина формы. До 1200 форма занимает всю ширину панели, на десктопе —
   восемь колонок из двенадцати, как на странице. Считается от ширины окна,
   а не от брейкпоинта: на 1920 выходит 1160, на 1280 — 754. */
.uc-tre-form{--form-w:100%}
@media (min-width:1200px){.uc-tre-form{
  --colw:calc((min(100vw,var(--max)) - 2*var(--pad) - 11*var(--gutter))/12);
  --form-w:calc(var(--colw)*8 + var(--gutter)*7);
}}

/* ---------- панель: только штатный блок ---------- */
.uc-tre-form:not(:has(.t396)){
  background:var(--bg-inverse);
  border-radius:var(--r-card);
  padding:var(--section-y) var(--pad);
  overflow:hidden;
}
/* Своя ширина и свои поля: контейнер, колонка и отбивки блока обнуляются,
   иначе панель получает поля Tilda поверх наших. */
.uc-tre-form:not(:has(.t396)) .t-section{padding:0!important}
.uc-tre-form:not(:has(.t396)) .t-container,
.uc-tre-form:not(:has(.t396)) .t-container_100,
.uc-tre-form:not(:has(.t396)) .t-col{max-width:100%;width:100%;margin:0;padding:0}
/* Заголовок и подпись идут по левому краю формы, а не панели. Обёртка шапки
   в блоках называется по-разному, поэтому перечислены все три варианта. */
.uc-tre-form:not(:has(.t396)) .t-section__topwrapper,
.uc-tre-form:not(:has(.t396)) .t-section__container,
.uc-tre-form:not(:has(.t396)) .js-block-header{
  max-width:var(--form-w); margin:0 auto; padding:0;
}
.uc-tre-form:not(:has(.t396)) .t-section__title,
.uc-tre-form:not(:has(.t396)) .t-title{
  font-family:var(--font-display)!important;
  font-size:var(--h2)!important; line-height:var(--h2-lh)!important;
  letter-spacing:var(--h2-ls)!important; font-weight:400!important;
  color:var(--text-on-dark)!important;
  margin:0 0 var(--s24)!important; text-align:left;
}
.uc-tre-form:not(:has(.t396)) .t-section__descr,
.uc-tre-form:not(:has(.t396)) .t-descr{
  font-family:var(--font-text)!important;
  font-size:var(--body-l)!important; line-height:var(--body-l-lh)!important;
  color:var(--text-on-dark-muted)!important;
  margin:0!important; text-align:left;
}

/* ---------- форма и поля: оба варианта ---------- */
.uc-tre-form .t-form{
  max-width:var(--form-w); margin-inline:auto;
  font-family:var(--font-text);
}
.uc-tre-form:not(:has(.t396)) .t-form{margin-top:var(--block-gap)}

.uc-tre-form .t-input-group{margin-bottom:var(--s32)!important}
/* «имя» и «телефон» стоят в ряд только с планшета: на телефоне поля в столбик,
   независимо от того, как Tilda сама раскладывает объединённые поля */
@media (max-width:767px){.uc-tre-form .t-input-group{width:100%!important;margin-right:0!important}}
@media (min-width:768px){.uc-tre-form .t-input-group{margin-bottom:var(--s40)!important}}
.uc-tre-form .t-input-group:last-of-type{margin-bottom:0!important}

.uc-tre-form .t-input-title{
  font-family:var(--font-text)!important;
  font-size:var(--caption)!important; line-height:var(--caption-lh)!important;
  letter-spacing:var(--caption-ls); font-weight:400!important;
  color:var(--text-on-dark-muted)!important;
  margin-bottom:var(--s8)!important;
}

.uc-tre-form .t-input,
.uc-tre-form .t-select{
  height:var(--field-h)!important; min-height:var(--field-h)!important;
  padding:0 0 var(--s16)!important;
  background:none!important; background-color:transparent!important;
  border:0!important; border-bottom:1px solid var(--border-on-dark)!important;
  border-radius:0!important;
  color:var(--text-on-dark)!important;
  font-family:var(--font-text)!important;
  font-size:var(--body-l)!important; line-height:var(--body-l-lh)!important;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--fast) var(--ease);
}
.uc-tre-form textarea.t-input{height:auto!important;min-height:calc(var(--field-h)*2)!important}
.uc-tre-form .t-input::placeholder{color:var(--text-on-dark-muted)!important;opacity:1}
.uc-tre-form .t-input:focus,
.uc-tre-form .t-select:focus{
  outline:none!important;
  border-bottom:2px solid var(--text-accent-on-dark)!important;
}
/* автозаполнение браузера красит поле в белый — гасим */
.uc-tre-form .t-input:-webkit-autofill{
  -webkit-text-fill-color:var(--text-on-dark);
  -webkit-box-shadow:0 0 0 1000px var(--bg-inverse) inset;
}
.uc-tre-form .t-select{cursor:pointer}
.uc-tre-form .t-select option{color:var(--text-primary);background:#fff}

/* ---------- согласие ---------- */
.uc-tre-form .t-checkbox__control{
  align-items:flex-start!important;
  font-family:var(--font-text)!important;
  font-size:var(--caption)!important; line-height:var(--caption-lh)!important;
  color:var(--text-on-dark-muted)!important;
  cursor:pointer;
}
.uc-tre-form .t-checkbox__indicator{
  width:20px!important; height:20px!important; margin-top:2px;
  border:1px solid var(--border-on-dark)!important; border-radius:4px!important;
  background:none!important;
  transition:background-color var(--base) var(--ease),border-color var(--base) var(--ease);
}
.uc-tre-form .t-checkbox:checked + .t-checkbox__indicator{
  background:var(--btn-bg)!important; border-color:var(--btn-bg)!important;
}
.uc-tre-form .t-checkbox:checked + .t-checkbox__indicator::after{
  border-color:var(--text-accent)!important; border-width:0 2px 2px 0!important;
}
.uc-tre-form .t-checkbox:focus-visible + .t-checkbox__indicator{
  outline:2px solid var(--text-accent-on-dark); outline-offset:2px;
}
.uc-tre-form .t-checkbox__control a{color:var(--text-accent-on-dark)!important;text-decoration:underline}

/* ---------- кнопка ---------- */
/* обёртка кнопки: в штатном блоке t-form__submit, в Zero Block — tn-form__submit */
.uc-tre-form .t-form__submit,
.uc-tre-form .tn-form__submit{margin-top:var(--s40);display:flex;justify-content:center}
/* ширину продавливаем: в Zero Block кнопка получает её инлайном (width:160px),
   а инлайн сильнее обычного правила — на телефоне кнопка оставалась узкой */
.uc-tre-form .t-submit{
  height:var(--btn-h)!important; min-width:var(--btn-min); width:100%!important;
  padding:0 var(--s40)!important;
  border:0!important; border-radius:var(--r-pill)!important;
  background:var(--btn-bg)!important; color:var(--text-accent)!important;
  font-family:var(--font-text)!important;
  font-size:var(--button)!important; line-height:1!important; font-weight:500!important;
  transition:background-color var(--base) var(--ease),transform var(--fast) var(--ease);
}
@media (min-width:768px){.uc-tre-form .t-submit{width:auto!important}}
/* в Zero Block надпись лежит в своём span и красится отдельно от кнопки */
.uc-tre-form .t-submit__content,
.uc-tre-form .t-submit__text{
  color:var(--text-accent)!important;
  font-family:var(--font-text)!important;
  font-size:var(--button)!important; font-weight:500!important;
}
.uc-tre-form .t-submit:hover{background:var(--btn-bg-hover)!important}
.uc-tre-form .t-submit:active{transform:scale(.98)}

/* ---------- ошибки и успех ---------- */
.uc-tre-form .t-input_has-error{border-bottom-color:var(--text-error)!important}
.uc-tre-form .t-input-error,
.uc-tre-form .t-form__errorbox-item{
  font-family:var(--font-text)!important;
  font-size:var(--caption)!important; line-height:var(--caption-lh)!important;
  color:var(--text-error)!important; background:none!important;
}
.uc-tre-form .t-form__successbox{
  background:none!important; border:0!important;
  font-family:var(--font-text)!important;
  font-size:var(--body-l)!important; line-height:var(--body-l-lh)!important;
  color:var(--text-on-dark)!important; text-align:left;
}


/* ===================================================================

   ============ ЧАСТЬ 3 · СТРАНИЦЫ «ПРОЕКТЫ» И «КЕЙС» ================

   Стили каталога проектов и страницы кейса. На Главной ни один из этих
   селекторов не встречается, поэтому часть безопасна для всех страниц
   сайта и едет тем же файлом.

   Источник — styles-pages.css, правится там.
   =================================================================== */

.tre{--chip-pad:24px;        
  --case-hero-top:96px;}
@media (min-width:768px){.tre{--chip-pad:32px;
  --case-hero-top:160px;}}
@media (min-width:1200px){.tre{--chip-pad:48px;
  --case-hero-top:200px;}}
@media (min-width:1440px){.tre{--case-hero-top:220px;}}
@media (min-width:1920px){.tre{--chip-pad:72px;
  --case-hero-top:272px;}}
.tre .chip{display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  height:var(--chip-h); padding-inline:var(--chip-pad);
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--bg-chip); color:var(--text-accent);
  font-size:var(--button); line-height:var(--button-lh); font-weight:500;
  white-space:nowrap;
  transition:background-color var(--base) var(--ease), border-color var(--base) var(--ease);}
.tre .chip.is-active{background:transparent; border-color:var(--border-accent)}
@media (hover:hover){.tre .chip:hover{background:var(--bg-accent-subtle)}
.tre .chip.is-active:hover{background:var(--bg-accent-subtle)}}
.tre .portfolio__head{align-items:end; margin-bottom:var(--block-gap)}
.tre .portfolio__filters{display:flex; gap:var(--s8);
  margin-top:var(--s24);
  margin-inline:calc(-1*var(--pad));
  padding-inline:var(--pad);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
.tre .portfolio__filters::-webkit-scrollbar{display:none}
.tre .portfolio__grid{row-gap:var(--grid-gap-y)}
.tre .portfolio__empty{margin-top:var(--s40)}
.tre .card-project[hidden]{display:none}
.tre .card-project--tile{transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.tre .portfolio__grid.is-swapping .card-project--tile{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.tre .card-project--tile{transition:none}
.tre .portfolio__grid.is-swapping .card-project--tile{opacity:1;transform:none}}
.tre .case-hero__media{position:absolute; inset:0; border-radius:0}
.tre .case-hero::after{background-color:var(--overlay-strong); background-image:var(--scrim-top)}
.tre .case-hero__inner{position:relative; z-index:2; height:100%;
  display:flex; align-items:flex-start;
  padding-top:var(--case-hero-top);
  color:var(--text-on-overlay);}
.tre .case-hero__inner .grid{width:100%}
.tre .case-hero__text{display:flex; flex-direction:column; gap:var(--s16)}
.tre .case-meta{display:flex; flex-direction:column; gap:var(--s8)}
.tre .case-meta__row{display:flex; gap:var(--s8)}
.tre .case-meta__label{color:var(--text-muted)}
.tre .case-meta__label::after{content:":"}
.tre .case-meta__value{margin:0}
.tre .case-story{display:flex; flex-direction:column; gap:var(--block-gap)}
.tre .case-story__title{color:var(--text-accent); margin-bottom:var(--head-gap)}
.tre .case-story__text{color:var(--text-secondary)}
.tre .case-gallery__grid{row-gap:var(--grid-gap-y)}
.tre .case-gallery__item{aspect-ratio:4/3}
.tre .case-gallery__item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tre .case-next__overline{margin-bottom:var(--head-gap)}
.tre .card-project--wide > a{aspect-ratio:335/296}
@media (min-width:768px){.tre .portfolio__title{grid-column:1/span 8}
.tre .portfolio__filters{grid-column:1/-1}
.tre .case-meta{flex-direction:row; flex-wrap:wrap; gap:var(--s16) var(--s40)}
.tre .case-gallery__grid > li{grid-column:span 4}
.tre .card-project--wide > a{aspect-ratio:704/400}}
@media (min-width:1200px){.tre .portfolio{padding-top:calc(var(--capsule-top) + 76px + var(--section-y))}
.tre .portfolio__title{grid-column:1/span 5}
.tre .portfolio__filters{grid-column:1/-1;
    margin-inline:0; padding-inline:0;
    overflow:visible;
    -webkit-mask-image:none; mask-image:none;}
.tre .case-gallery__grid > li{grid-column:span 6}
.tre .card-project--tile{grid-column:span 6}
.tre .card-project--tile > a{aspect-ratio:860/761}
.tre .case-meta{flex-direction:column; grid-column:1/span 3; gap:var(--s8)}
.tre .case-story{grid-column:5/span 6}
.tre .card-project--wide > a{aspect-ratio:1760/500}}
@media (min-width:1440px){.tre .portfolio__title{grid-column:1/span 4}}
@media (min-width:1920px){.tre .portfolio__filters{grid-column:5/-1; grid-row:1;
    justify-self:end; align-self:end;
    margin-top:0;}}