/* ====== токены ====== */
:root{
  color-scheme: dark;
  --void:#0b0a08;          /* тёплый чёрный фон */
  --void-2:#100e0b;        /* чуть светлее — панели */
  --ink:#ece4d3;           /* кость/бумага — основной текст */
  --ink-2:rgba(236,228,211,.70);
  --ink-3:rgba(236,228,211,.46);
  --ink-4:rgba(236,228,211,.26);
  --hair:rgba(236,228,211,.14);   /* волосяные линии */
  --hair-2:rgba(236,228,211,.08);
  /* акцент — латунь/2700 K; тёплость зависит от регулятора температуры (--warm 0..1) */
  --warm:1;
  --gold-h: calc(32deg + (1 - var(--warm)) * 12deg);
  --gold: hsl(var(--gold-h) calc(46% + (1 - var(--warm))*6%) calc(63% + (1 - var(--warm))*6%));
  --gold-hi: hsl(var(--gold-h) 66% 82%);
  --gold-dim: hsl(var(--gold-h) 40% 46%);
  --glow: color-mix(in srgb, var(--gold) 80%, white 20%);
  /* свет: позиция курсора в px, интенсивность, диммер */
  --lx:50vw; --ly:36vh; --lint:1; --dim:1;
  --maxw:1320px; --gut:clamp(20px,5vw,80px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,"Segoe UI",system-ui,sans-serif;
  --fs-body:clamp(16px,1.05vw + 12px,19px);
  --lh:1.62;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font:400 var(--fs-body)/var(--lh) var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; letter-spacing:.005em;
}
/* общий тёплый ореол света под курсором — на всю страницу, дешёвый радиальный градиент */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at var(--lx) var(--ly),
      color-mix(in srgb, var(--gold) 16%, transparent) 0%,
      color-mix(in srgb, var(--gold) 6%, transparent) 26%,
      transparent 60%);
  opacity:calc(var(--lint) * var(--dim)); transition:opacity .9s var(--ease);
  mix-blend-mode:screen;
}
/* звёзды/зерно глубины — очень тихо, проявляются в «свет выключен» */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(236,228,211,.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(236,228,211,.35), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(236,228,211,.3), transparent),
    radial-gradient(1px 1px at 85% 22%, rgba(236,228,211,.4), transparent),
    radial-gradient(1px 1px at 33% 55%, rgba(236,228,211,.25), transparent);
  transition:opacity 1.2s var(--ease);
}
body.lights-out{ --dim:.34 }
body.lights-out::after{ opacity:.5 }
.shell > *{ transition:opacity .9s var(--ease) }
body.lights-out .shell > *:not(.hero){ opacity:.5 }
main,header,footer{position:relative; z-index:1}

/* ====== типографика ====== */
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.0; letter-spacing:-.012em; margin:0}
.display{font-family:var(--serif); font-weight:300; line-height:.96; letter-spacing:-.02em}
.kicker{font:600 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0}
.idx{font:500 12px/1 var(--sans); letter-spacing:.18em; color:var(--ink-3)}
.lede{font-family:var(--serif); font-weight:400; font-size:clamp(21px,2vw + 10px,30px); line-height:1.4; color:var(--ink); letter-spacing:-.005em}
p{margin:0 0 1.1em}
em{font-style:italic; color:var(--gold-hi)}
a{color:inherit; text-decoration:none}
::selection{background:color-mix(in srgb,var(--gold) 40%,transparent); color:#fff}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.serif{font-family:var(--serif)}

/* ссылка-луч: подчёркивание проезжает как луч */
.beam{position:relative; color:var(--ink); white-space:nowrap}
.beam::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease)}
.beam:hover::after,.beam:focus-visible::after{transform:scaleX(1)}
.beam:focus-visible{outline:none}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ====== раскладка ====== */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.wide{max-width:1620px; margin:0 auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vh,150px)}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(32px,5vh,64px)}
.sec-head .idx{flex:none}
.sec-head .rule{flex:1; height:1px; background:var(--hair); align-self:center}
.hr{height:1px; background:var(--hair); border:0; margin:0}

/* ====== шапка ====== */
.top{position:fixed; inset:0 0 auto 0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px var(--gut); mix-blend-mode:normal;
  background:linear-gradient(var(--void), color-mix(in srgb,var(--void) 10%,transparent));
  transition:background .4s var(--ease),transform .5s var(--ease)}
.top.hide{transform:translateY(-104%)}
.top.solid{background:color-mix(in srgb,var(--void) 86%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair-2)}
.brand{display:flex; align-items:center; gap:12px; font:500 15px/1 var(--sans); letter-spacing:.3em; color:var(--ink)}
.brand svg{width:26px; height:26px; flex:none}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav a{font:500 13.5px/1 var(--sans); letter-spacing:.04em; color:var(--ink-2); transition:color .3s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .cab{display:inline-flex; align-items:center; gap:7px; color:var(--gold)}
.nav .cab svg{width:14px;height:14px}
.sep{width:1px; height:18px; background:var(--hair)}

/* пульт света */
.lamp{display:flex; align-items:center; gap:14px}
.lamp .sw{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:600 11px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); background:none; border:0; padding:4px}
.lamp .bulb{width:12px; height:12px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--gold) 70%,transparent); transition:.4s}
body.lights-out .lamp .bulb{background:var(--ink-4); box-shadow:none}
.lamp .temp{display:flex; align-items:center; gap:9px}
.lamp .temp input{appearance:none; width:88px; height:2px; background:linear-gradient(90deg,#8a5a2a,#ffdca6); border-radius:2px; cursor:pointer}
.lamp .temp input::-webkit-slider-thumb{appearance:none; width:13px; height:13px; border-radius:50%; background:var(--gold-hi);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--gold) 60%,transparent)}
.lamp .temp input::-moz-range-thumb{width:13px; height:13px; border:0; border-radius:50%; background:var(--gold-hi)}
.lamp .kv{font:500 12px/1 var(--sans); letter-spacing:.08em; color:var(--gold); min-width:50px; text-align:right}

.menu-btn{display:none}

/* ====== герой ====== */
.hero{min-height:100svh; display:flex; flex-direction:column; padding:84px 0 24px; position:relative}
.hero .wide{width:100%; flex:1 1 auto; display:flex; align-items:center}
.hero-grid{display:grid; grid-template-columns:1fr; gap:34px}
.hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(60px,15.5vw,250px); line-height:.9; letter-spacing:-.02em}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.04em}
.hero h1 .ln > span{display:inline-block; will-change:transform; transform:translateY(103%); animation:rise 1.15s var(--ease) both}
@keyframes rise{to{transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1 .ln > span{transform:none; animation:none}}
.hero h1 .em{font-style:italic; font-weight:400}
/* буквы героя отбрасывают длинную мягкую тень, веером от света */
.lit{color:var(--ink); text-shadow:
    calc(var(--sx,0) * .06em) calc(var(--sy,0) * .06em) .02em rgba(0,0,0,.55),
    calc(var(--sx,0) * .14em) calc(var(--sy,0) * .14em) .09em rgba(0,0,0,.5),
    calc(var(--sx,0) * .3em)  calc(var(--sy,0) * .3em)  .34em rgba(0,0,0,.4);}
.hero .sub{max-width:40ch; color:var(--ink-2); font-size:clamp(16px,.6vw+14px,19px)}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px 26px; font:500 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.hero .meta b{color:var(--gold); font-weight:600}
.hero-foot{flex:none; margin:28px var(--gut) 0; display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.scrollhint{display:inline-flex; align-items:center; gap:10px; font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.scrollhint .ln2{width:48px; height:1px; background:var(--hair); position:relative; overflow:hidden}
.scrollhint .ln2::after{content:""; position:absolute; inset:0; width:40%; background:var(--gold); animation:beam 2.6s var(--ease) infinite}
@keyframes beam{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}

/* ====== манифест ====== */
.manifesto .man-block{max-width:62ch; margin-left:auto}
.manifesto p{font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.3vw,37px); line-height:1.32; letter-spacing:-.01em; color:var(--ink-2); max-width:30ch; margin:0 0 .7em}
.manifesto p:first-child{font-size:clamp(26px,3vw,50px); line-height:1.18; color:var(--ink); max-width:24ch; margin-bottom:.55em}
.manifesto em{color:var(--gold-hi)}
@media (max-width:860px){.manifesto .man-block{margin-left:0} .manifesto p,.manifesto p:first-child{max-width:none}}

/* ====== проекты ====== */
.proj-list{display:grid; gap:1px; background:var(--hair-2); border-block:1px solid var(--hair)}
.proj{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,56px); align-items:center;
  background:var(--void); padding:clamp(26px,4vh,52px) 0; position:relative; transition:background .6s var(--ease)}
.proj:hover{background:var(--void-2)}
.proj .plate{aspect-ratio:16/10; border:1px solid var(--hair); background:#000; overflow:hidden; position:relative}
.proj .plate svg{width:100%; height:100%; display:block}
/* блик пластины следует за светом; тени внутри SVG сдвигаются от света */
[data-plate]{position:relative}
[data-plate]::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(58% 58% at var(--px,50%) var(--py,42%), color-mix(in srgb,var(--gold) 24%,transparent), transparent 68%);
  opacity:calc(.55*var(--lint)); transition:opacity .7s var(--ease)}
[data-plate] .shadow{transform:translate(var(--shift,0),var(--shift-y,0)); transition:transform .5s var(--ease)}
[data-plate] .lit-face{opacity:calc(.6 + .4*var(--lint))}
[data-plate]{background:#000}
[data-plate] img{width:100%; height:100%; display:block; object-fit:cover; transition:opacity .9s var(--ease)}
body.lights-out [data-plate] img{opacity:.42}
.proj .body{padding-right:clamp(0px,2vw,30px)}
.proj .row{display:flex; align-items:baseline; gap:16px; margin-bottom:14px}
.proj h3{font-size:clamp(28px,3.4vw,50px); line-height:1.0}
.proj .type{font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.proj .one{color:var(--ink-2); max-width:46ch; margin:0 0 18px; font-size:clamp(16px,.5vw+14px,18.5px)}
.proj .metric{font:500 12.5px/1 var(--sans); letter-spacing:.06em; color:var(--gold); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.proj .metric .dot{width:3px; height:3px; border-radius:50%; background:var(--gold-dim)}
.proj .go{margin-top:20px; display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.proj .go svg{width:22px; height:7px; transition:transform .4s var(--ease)}
.proj:hover .go svg{transform:translateX(6px)}
.proj:hover .go{color:var(--ink)}
.alt .proj{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.alt .proj .plate{order:2}

/* ====== подход / услуги ====== */
.svc{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair-2); border:1px solid var(--hair)}
.svc .it{background:var(--void); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:16px; min-height:230px; transition:background .5s}
.svc .it:hover{background:var(--void-2)}
.svc .it .ico{width:46px; height:46px; color:var(--gold)}
.svc .it h3{font-size:clamp(22px,1.6vw,28px)}
.svc .it p{color:var(--ink-2); margin:0; font-size:16.5px}
.svc .it .n{margin-top:auto; font:500 12px/1 var(--sans); letter-spacing:.14em; color:var(--ink-4)}

/* ====== числа ====== */
.nums{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-2); border:1px solid var(--hair)}
.nums .n{background:var(--void); padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; gap:10px}
.nums .v{font-family:var(--serif); font-weight:300; font-size:clamp(52px,6vw,104px); line-height:.86; color:var(--ink)}
.nums .v .u{font-size:.32em; color:var(--gold); margin-left:.1em; letter-spacing:0}
.nums .l{color:var(--ink-3); font-size:14.5px; max-width:26ch}

/* ====== цитата ====== */
.quote{text-align:center; max-width:28ch; margin-inline:auto}
.quote blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(28px,4vw,58px); line-height:1.14; letter-spacing:-.015em; margin:0}
.quote .by{margin-top:26px; font:600 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}

/* ====== журнал (тизер + индекс) ====== */
.jr{display:grid; gap:1px; background:var(--hair-2); border-block:1px solid var(--hair)}
.jr a{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,48px); align-items:baseline;
  background:var(--void); padding:clamp(20px,2.6vh,34px) 0; transition:background .5s,padding-left .5s var(--ease)}
.jr a:hover{background:var(--void-2); padding-left:14px}
.jr .ru{font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); min-width:96px}
.jr h3{font-size:clamp(20px,2.1vw,32px); line-height:1.08}
.jr .th{color:var(--ink-3); font-size:15px; margin-top:7px; max-width:70ch}
.jr .dt{font:500 12.5px/1 var(--sans); color:var(--ink-3); white-space:nowrap; letter-spacing:.04em}

/* ====== финальный призыв ====== */
.cta{padding-block:clamp(80px,14vh,180px)}
.cta h2{font-family:var(--serif); font-weight:300; font-size:clamp(40px,8vw,128px); line-height:.94; letter-spacing:-.02em; max-width:14ch}
.cta p{color:var(--ink-2); max-width:44ch; margin:26px 0 0; font-size:clamp(17px,.6vw+15px,21px)}
.cta .act{margin-top:40px}

/* кнопка */
.btn{display:inline-flex; align-items:center; gap:14px; font:600 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--void); background:var(--gold); padding:17px 28px; border-radius:2px; border:0; cursor:pointer; transition:.4s var(--ease)}
.btn:hover{background:var(--gold-hi); gap:20px}
.btn svg{width:24px; height:8px}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--hair); padding:16px 27px}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ====== подвал ====== */
footer{border-top:1px solid var(--hair); padding-block:clamp(48px,7vh,90px); color:var(--ink-2)}
footer .cols{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(24px,4vw,56px)}
footer .about{max-width:34ch; color:var(--ink-3); font-size:15.5px}
footer .about .mark{display:flex; align-items:center; gap:11px; color:var(--ink); font:500 15px/1 var(--sans); letter-spacing:.3em; margin-bottom:18px}
footer .about .mark svg{width:24px;height:24px}
footer h4{font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); margin:0 0 16px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
footer ul a{color:var(--ink-2); font-size:15px}
footer ul a:hover{color:var(--gold)}
footer .base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(40px,6vh,72px); padding-top:26px; border-top:1px solid var(--hair-2); color:var(--ink-4); font-size:13px; letter-spacing:.03em}

/* ====== внутренние страницы: общий баннер ====== */
.phead{padding:clamp(130px,20vh,220px) 0 clamp(40px,6vh,70px)}
.phead h1{font-weight:300; font-size:clamp(44px,8.5vw,140px); line-height:.92; letter-spacing:-.02em}
.phead .lede{max-width:52ch; margin-top:26px}
.crumbs{display:flex; gap:10px; align-items:center; font:500 12px/1 var(--sans); letter-spacing:.1em; color:var(--ink-3); margin-bottom:28px; text-transform:uppercase}
.crumbs a:hover{color:var(--gold)} .crumbs .s{color:var(--ink-4)}

.prose{max-width:70ch} .prose.wide2{max-width:80ch}
.prose p{color:var(--ink-2); margin:0 0 1.15em} .prose p:last-child{margin-bottom:0}
.prose h2{font-size:clamp(26px,2.6vw,40px); margin:1.6em 0 .5em; color:var(--ink)}
.prose h3{font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:0; margin:1.6em 0 .5em; color:var(--ink)}
.prose ul,.prose ol{color:var(--ink-2); margin:0 0 1.2em; padding-left:1.3em}
.prose li{margin:.4em 0}
.prose blockquote{border-left:2px solid var(--gold); margin:1.6em 0; padding:2px 0 2px 24px; font-family:var(--serif); font-size:clamp(21px,2vw,28px); line-height:1.3; color:var(--ink)}
.prose .note{border:1px solid var(--hair); border-left:2px solid var(--gold); padding:18px 22px; margin:1.6em 0; color:var(--ink-2); font-size:16px; background:var(--void-2)}
.prose table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:15px}
.prose th{text-align:left; font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); padding:10px 14px 10px 0; border-bottom:1px solid var(--hair)}
.prose td{padding:12px 14px 12px 0; border-bottom:1px solid var(--hair-2); color:var(--ink-2); vertical-align:top}

/* факт-строки / спеки */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--hair-2); border:1px solid var(--hair)}
.facts .f{background:var(--void); padding:20px 22px}
.facts .f dt{font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:9px}
.facts .f dd{margin:0; font-family:var(--serif); font-size:23px; line-height:1.15; color:var(--ink)}

/* галерея SVG-пластин проекта */
.plates{display:grid; gap:clamp(16px,2.4vw,30px)}
.plate-fig{margin:0; border:1px solid var(--hair); background:#000; overflow:hidden}
.plate-fig svg{width:100%; height:100%; display:block}
.plate-fig figcaption{padding:14px 18px; font:500 13px/1.4 var(--sans); letter-spacing:.02em; color:var(--ink-3); border-top:1px solid var(--hair-2)}

/* команда */
.team{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px; background:var(--hair-2); border:1px solid var(--hair)}
.team .m{background:var(--void); padding:26px; display:flex; flex-direction:column; gap:10px; transition:background .5s}
.team .m:hover{background:var(--void-2)}
.team .m .av{width:44px; height:44px; color:var(--gold); margin-bottom:6px}
.team .m .nm{font-family:var(--serif); font-size:25px; line-height:1.05; color:var(--ink)}
.team .m .rl{font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.team .m .bo{color:var(--ink-3); font-size:14.5px; margin:0}

/* таймлайн */
.tl{border-top:1px solid var(--hair)}
.tl .e{display:grid; grid-template-columns:120px 1fr; gap:clamp(18px,4vw,60px); padding:clamp(22px,3vh,40px) 0; border-bottom:1px solid var(--hair-2)}
.tl .y{font-family:var(--serif); font-size:34px; color:var(--gold); line-height:1}
.tl .t{color:var(--ink-2); max-width:70ch; margin:0}

/* этапы */
.stages{counter-reset:st; border-top:1px solid var(--hair)}
.stage{padding:clamp(26px,4vh,52px) 0; border-bottom:1px solid var(--hair-2); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px)}
.stage .no{font-family:var(--serif); font-size:clamp(40px,5vw,78px); font-weight:300; color:var(--ink-4); line-height:.8}
.stage h3{font-size:clamp(24px,2.4vw,36px); margin-bottom:12px}
.stage .dur{font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:inline-block}
.stage .de{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px}
.stage .de span{font:500 12.5px/1 var(--sans); color:var(--ink-2); border:1px solid var(--hair); border-radius:2px; padding:7px 12px}

/* формы (контакты / кабинет) */
.form{display:grid; gap:18px; max-width:560px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{background:var(--void-2); border:1px solid var(--hair); color:var(--ink);
  font:400 16px/1.4 var(--sans); padding:14px 16px; border-radius:2px; transition:border-color .3s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.field .hint{font-size:12.5px; color:var(--ink-4); letter-spacing:.02em}
.field.err input,.field.err select,.field.err textarea{border-color:#c4654a}
.field .msg{font-size:12.5px; color:#d98a6f; min-height:1em}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-3)}
.consent input{margin-top:3px}
.code-in{display:flex; gap:10px}
.code-in input{width:52px; text-align:center; font-family:var(--serif); font-size:26px; padding:12px 0}
.ok-note{border:1px solid var(--hair); border-left:2px solid var(--gold); background:var(--void-2); padding:22px 24px}
.ok-note h3{font-family:var(--serif); font-weight:400; font-size:26px; color:var(--ink); margin-bottom:8px}

/* кабинет — возможности */
.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair-2); border:1px solid var(--hair)}
.feat .f{background:var(--void); padding:26px; display:flex; flex-direction:column; gap:12px}
.feat .f .ico{width:34px;height:34px;color:var(--gold)}
.feat .f h3{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:0}
.feat .f p{color:var(--ink-3); font-size:14.5px; margin:0}

/* каталог проектов: фильтр */
.filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.filter button{font:600 12px/1 var(--sans); letter-spacing:.08em; color:var(--ink-2); background:none;
  border:1px solid var(--hair); border-radius:2px; padding:10px 15px; cursor:pointer; transition:.3s}
.filter button:hover{color:var(--ink); border-color:var(--ink-3)}
.filter button[aria-pressed=true]{color:var(--void); background:var(--gold); border-color:var(--gold)}

/* пара навигации вперёд/назад внизу материала */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair-2); border:1px solid var(--hair); margin-top:60px}
.pager a{background:var(--void); padding:26px 28px; transition:background .5s}
.pager a:hover{background:var(--void-2)}
.pager a.next{text-align:right}
.pager .lb{font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4)}
.pager .ti{font-family:var(--serif); font-size:24px; color:var(--ink); margin-top:8px; display:block}

/* 404 */
.nf{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px; padding:120px var(--gut) 60px}
.nf .big{font-family:var(--serif); font-weight:300; font-size:clamp(90px,22vw,260px); line-height:.8; color:var(--ink)}

/* мобильное меню */
.sheet{position:fixed; inset:0; z-index:60; background:color-mix(in srgb,var(--void) 97%,transparent); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; padding:28px var(--gut); transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden}
.sheet.open{transform:none; visibility:visible}
.sheet .x{align-self:flex-end; background:none; border:0; color:var(--ink); cursor:pointer; padding:8px; font:600 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; display:flex; gap:9px; align-items:center}
.sheet nav{display:flex; flex-direction:column; gap:4px; margin-top:34px}
.sheet nav a{font-family:var(--serif); font-weight:300; font-size:clamp(34px,10vw,62px); line-height:1.1; color:var(--ink); padding:6px 0; border-bottom:1px solid var(--hair-2)}
.sheet nav a .n{font:600 12px/1 var(--sans); letter-spacing:.2em; color:var(--gold); vertical-align:super; margin-right:14px}
.sheet .mlamp{margin-top:auto; padding-top:24px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--hair)}

/* reveal при скролле */
.rv{opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-line{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease)}
.rv-line.in{clip-path:inset(0 0 -10% 0)}

/* точка-курсор (тонкий пойнтер) на устройствах с мышью */
@media (hover:hover) and (pointer:fine){
  .cursor-dot{position:fixed; top:0; left:0; z-index:90; width:7px; height:7px; border-radius:50%; background:var(--gold-hi);
    box-shadow:0 0 12px 2px color-mix(in srgb,var(--gold) 70%,transparent); transform:translate(-50%,-50%); pointer-events:none;
    transition:width .25s,height .25s,opacity .3s; mix-blend-mode:screen}
  .cursor-dot.big{width:34px; height:34px; background:color-mix(in srgb,var(--gold) 40%,transparent); box-shadow:none}
}
.cursor-dot{display:none}

/* двухколонки материалов — сворачиваются на мобиле (класс, не inline) */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,5vw,80px)}
.split2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px)}
.scroll-x{overflow-x:auto}

/* ====== адаптив ====== */
@media (max-width:1080px){
  footer .cols{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .split,.split2{grid-template-columns:1fr; gap:22px}
  .nav{display:none}
  .lamp .temp{display:none}
  .menu-btn{display:inline-flex; align-items:center; gap:9px; background:none; border:0; color:var(--ink); cursor:pointer;
    font:600 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:6px}
  .menu-btn .bars{display:inline-flex; flex-direction:column; gap:4px}
  .menu-btn .bars i{width:22px; height:1.5px; background:var(--ink); display:block}
  .proj,.alt .proj{grid-template-columns:1fr; gap:22px}
  .alt .proj .plate{order:0}
  .nums{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .tl .e,.stage{grid-template-columns:1fr; gap:12px}
  .jr a{grid-template-columns:1fr auto; gap:6px 18px}
  .jr .th{grid-column:1/-1}
  .pager{grid-template-columns:1fr}
  .phead .lede{font-size:21px}
}
@media (max-width:560px){
  .hero-foot{flex-direction:column; align-items:flex-start; gap:12px}
  .facts{grid-template-columns:1fr 1fr}
}

/* печать/доступность движения */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none} .rv-line{clip-path:none}
  .scrollhint .ln2::after{animation:none; transform:translateX(0)}
}
/* без JS: статичный освещённый вид, пульт прячем */
.no-js .lamp,.no-js .menu-btn,.no-js .cursor-dot{display:none}
.no-js .rv{opacity:1; transform:none} .no-js .rv-line{clip-path:none}
.no-js .hero h1 .ln > span{transform:none}