
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#EEEAE2;--paper:#F7F4EF;--ink:#1B1A17;--muted:#6F695E;
  --line:rgba(27,26,23,.13);--accent:#9A8358;
  --serif:"Cormorant Garamond","Noto Serif Armenian",Georgia,serif;
  --sans:"Manrope","Noto Sans Armenian",system-ui,sans-serif;
  --ease:cubic-bezier(.65,0,.2,1);--cut:56px;--pad:clamp(16px,3vw,44px)
}
:lang(hy){--serif:"Noto Serif Armenian",Georgia,serif;--sans:"Noto Sans Armenian",system-ui,sans-serif}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


.shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding:0 var(--pad)}


.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(10px,1.8vh,18px) 0;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center}
.logo img{display:block;height:clamp(46px,7.6vh,64px);width:auto}
.logo-text{display:none;font:600 24px/1 var(--serif);letter-spacing:.2em}
.logo.no-img img{display:none}.logo.no-img .logo-text{display:block}
.brand-line{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.actions{display:flex;align-items:center;gap:14px}
.crm-btn{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:999px;transition:.3s}
.crm-btn:hover{background:var(--ink);color:var(--paper)}
.crm-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.langs{display:flex}
.langs [data-lang]{font-size:12px;letter-spacing:.1em;padding:8px;color:var(--muted);position:relative;transition:color .3s}
.langs [data-lang]:hover,.langs [data-lang][aria-current="page"]{color:var(--ink)}
.langs [data-lang][aria-current="page"]::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:1px;background:var(--ink)}


.intro{position:relative;display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"title detail";gap:40px;align-items:end;padding:clamp(12px,3vh,34px) 0 clamp(12px,2.4vh,26px)}
.intro h1,.intro-size{font:500 clamp(28px,min(4.2vw,6.4vh),62px)/1.03 var(--serif);letter-spacing:-.01em;max-width:16ch}

.intro-size{grid-area:title;visibility:hidden;pointer-events:none;user-select:none;font-family:"Cormorant Garamond",Georgia,serif}
.intro h1{position:absolute;grid-area:title;inset:auto 0 0 0}
.intro>div{position:absolute;grid-area:detail;inset:auto 0 0 0}
@media(min-width:761px){html[lang=ru] .intro h1,html[lang=hy] .intro h1{max-width:22ch}}
.intro p{color:var(--muted);max-width:46ch;font-size:14px}
.hint{margin-top:12px;display:inline-flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.hint::before{content:"";width:34px;height:1px;background:var(--ink)}


.board{display:flex;min-height:0}
.panel{position:relative;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;background:#2a2722;
  margin-left:calc(var(--cut) * -1 + 8px);
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  transition:flex .8s var(--ease)}
.panel:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.panel:last-child{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
.media{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);background:var(--fb);
  transform:scale(1.08);filter:saturate(.85) brightness(.88);transition:transform 1.2s var(--ease),filter .8s}
.panel:hover .media,.panel.is-open .media{transform:scale(1);filter:none}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,12,.1) 35%,rgba(15,14,12,.72))}
.panel.is-open .shade{background:linear-gradient(90deg,rgba(15,14,12,.84),rgba(15,14,12,.42) 55%,rgba(15,14,12,.12))}
@media (hover:hover) and (min-width:761px){
  .board:not(.has-open):hover .panel{flex-grow:.85}
  .board:not(.has-open) .panel:hover{flex-grow:1.6}
}
.board.has-open .panel{flex-grow:.45}
.board.has-open .panel.is-open{flex-grow:3.6}

.trigger{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:22px calc(var(--cut) + 14px) 24px calc(var(--cut) + 6px);text-align:left;color:#fff}
.panel:first-child .trigger{padding-left:24px}
.panel:last-child .trigger{padding-right:24px}
.top{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.icon{flex:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s,color .3s}
.icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none}
.panel:hover .icon{background:rgba(255,255,255,.15)}
.panel.is-open .icon{transform:rotate(45deg);background:#fff;color:var(--ink)}
.name{font:500 clamp(19px,1.6vw,28px)/1.1 var(--serif);max-width:12ch;transition:opacity .4s}
.panel.is-open .name{opacity:0}
.board.has-open .panel:not(.is-open) .name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:17px;max-width:none;white-space:nowrap}

.content{position:absolute;z-index:3;left:calc(var(--cut) + 6px);bottom:24px;
  max-width:min(470px,calc(100% - 2 * var(--cut) - 40px));color:#fff;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease),visibility .4s}
.panel:first-child .content{left:24px}
.panel.is-open .content{max-height:calc(100% - 70px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;opacity:1;visibility:visible;transform:none;transition-delay:.35s}
.content h2{font:500 clamp(26px,min(3vw,5vh),44px)/1.05 var(--serif);margin-bottom:12px}
.content p{color:rgba(255,255,255,.86);margin-bottom:16px;font-size:14.5px}
.points{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.points li{font-size:12px;padding:5px 12px;border:1px solid rgba(255,255,255,.32);border-radius:999px}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.03em;transition:.3s}
.btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}


.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(10px,1.8vh,16px) 0 clamp(12px,2vh,18px);margin-top:clamp(10px,1.8vh,18px);border-top:1px solid var(--line)}
.offices{display:flex;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.office{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13px}
.office b{font:500 18px/1 var(--serif)}
.office .addr{color:var(--muted)}
.office a:hover{color:var(--accent)}
.foot-right{display:flex;align-items:center;gap:16px}
.socials{display:flex;gap:8px}
.socials a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s}
.socials a:hover{background:var(--ink);color:var(--paper)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.copy{font-size:12px;color:var(--muted)}


.dlg{max-height:calc(100dvh - 32px);overflow:auto;margin:auto;border:0;border-radius:20px;padding:28px;width:min(420px,calc(100% - 32px));background:var(--paper);color:var(--ink)}
.dlg::backdrop{background:rgba(20,18,15,.5);backdrop-filter:blur(4px)}
.dlg-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.26em;color:var(--muted);margin-bottom:18px}
.close{font-size:24px;line-height:1;width:36px;height:36px;border-radius:50%}
.close:hover{background:var(--line)}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:999px;margin-bottom:20px}
.tabs button{flex:1;padding:9px;border-radius:999px;font-size:13px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dlg .dlg-title{font:500 28px/1.1 var(--serif);margin-bottom:10px}
.dlg p{color:var(--muted);font-size:14px;margin-bottom:18px}
.btn-dark{background:var(--ink);color:#fff;width:100%;justify-content:center}
.btn-dark:hover{background:var(--accent)}
.dlg .note{font-size:12px;margin:12px 0 0}


@media (max-height:760px){
  .intro p{display:none}.hint{margin-top:0}
  .intro{grid-template-columns:1fr auto}
  .points{display:none}
}
@media (max-height:560px) and (min-width:761px){
  .intro{display:none}
  .office .addr{display:none}
}


@media (max-width:1100px){
  .brand-line{display:none}
  .office .addr{display:none}
}


@media (max-width:760px){
  :root{--cut:14px}
  .crm-btn span{display:none}.crm-btn{padding:8px}
  .logo img{height:42px}
  .intro{grid-template-columns:1fr;grid-template-areas:"title";padding:12px 0}
  .intro h1,.intro-size{font-size:clamp(22px,6.6vw,30px);max-width:none}
  .intro-size,html[lang=en] .intro h1{max-width:32ch}
  .intro div{display:none}

  .board{flex-direction:column}
  .panel{flex:1 1 0;margin-left:0;margin-top:calc(var(--cut) * -1 + 4px);
    clip-path:polygon(0 var(--cut),100% 0,100% calc(100% - var(--cut)),0 100%)}
  .panel:first-child{margin-top:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
  .panel:last-child{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
  .board.has-open .panel{flex:0 0 50px}
  .board.has-open .panel.is-open{flex:1 1 auto}

  .trigger,.panel:first-child .trigger,.panel:last-child .trigger{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:calc(var(--cut) + 2px) 16px}
  .panel.is-open .trigger{align-items:flex-start}
  .top{display:contents}
  .name{order:1;flex:1;max-width:none;font-size:19px}.icon{order:2;width:34px;height:34px}
  .board.has-open .panel:not(.is-open) .name{writing-mode:horizontal-tb;transform:none;font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .content,.panel:first-child .content{left:16px;right:16px;max-width:none;bottom:calc(var(--cut) + 10px)}
  .content h2{font-size:26px;margin-bottom:8px}
  .content p{font-size:13.5px;margin-bottom:14px}
  .points{display:none}
  .btn{padding:11px 16px;font-size:12.5px}

  .footer{gap:12px}
  .offices{gap:14px}
  .office{gap:6px;font-size:12px}
  .office b{font-size:15px}
  .office a+a{display:none}
  .copy{display:none}
}
@media(max-width:360px){.intro h1{left:-8px;right:-8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.panel[data-id="design"]{--pos:14% center;--fb:linear-gradient(135deg,#5b5146,#2b2621)}
.panel[data-id="lighting"]{--pos:center top;--fb:linear-gradient(160deg,#4a463a,#1c1b16)}
.panel[data-id="furniture"]{--pos:center;--fb:linear-gradient(140deg,#6a4b33,#2a1d14)}
.panel[data-id="construction"]{--pos:center;--fb:linear-gradient(150deg,#6f6a61,#2e2b27)}
.panel[data-id="sourcing"]{--pos:center;--fb:linear-gradient(150deg,#8c8471,#3a3529)}
.dlg .dlg-title{color:var(--ink);font:500 28px/1.1 var(--serif);margin-bottom:10px}
.langs [data-lang]{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
.crm-btn,.close,.tabs button{min-width:44px;min-height:44px}
.socials a{position:relative}
.socials a::before{content:"";position:absolute;inset:-4px}
.office a{position:relative}
.office a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
@media(max-width:760px){
 .office a+a{display:inline}
 .office{row-gap:24px}
 .copy{display:block;font-size:11px;white-space:nowrap}
 .foot-right{flex-direction:column;gap:10px;align-items:flex-end}
 .socials{gap:8px}
}
@media(max-height:559px),(max-width:340px){
 body{overflow:auto}
 .shell{height:auto;min-height:100dvh;grid-template-rows:auto auto minmax(400px,1fr) auto}
 .board{min-height:400px}
}
html.needs-scroll body{overflow:auto}
html.needs-scroll .shell{height:auto;min-height:100dvh;grid-template-rows:auto auto minmax(400px,1fr) auto}
html.needs-scroll .intro{display:grid;min-height:0}
html.needs-scroll .intro h1{position:static;grid-area:title;max-width:none}
html.needs-scroll .intro-size{display:none}
html.needs-scroll .board{min-height:400px}
.socials{gap:0}
.socials a{width:44px;height:44px;border:0}
.socials a::before{inset:4px;border:1px solid var(--line);border-radius:50%;pointer-events:none}
@media(max-width:760px){
 .offices{flex:1;min-width:0;display:grid;grid-template-columns:1fr;gap:10px}
 .office{display:grid;grid-template-columns:62px minmax(0,1fr);gap:24px 6px;line-height:20px}
 .office b{grid-column:1;grid-row:1;line-height:20px}
 .office a{grid-column:2;white-space:nowrap}
 .socials{gap:0}
}
@media(max-width:760px){.office{align-items:center}}
@media(max-width:760px){
 .shell{grid-template-columns:minmax(0,1fr);min-width:0}
 .header{min-width:0}
 .logo{flex-shrink:0}
 .actions{flex-shrink:0}
 .langs [data-lang]{min-width:0;min-height:42px}
 .crm-btn{min-width:0;min-height:0;position:relative}
 .crm-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%}
 .footer{flex-direction:column;align-items:stretch;gap:6px}
 .offices{display:grid;grid-template-columns:minmax(0,1fr);gap:0;flex:none}
 .office{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-height:44px;line-height:20px}
 .office b{width:56px;flex:none;line-height:20px}
 .office a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-family:"Manrope",system-ui,sans-serif}
 .office a::before{content:none}
 .foot-right{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
 .copy{order:-1;white-space:nowrap}
 .socials{margin-left:auto}
}
@media(max-width:760px){.office a+a{display:inline-flex}}
