/* MebelSoft.kz — цех мягкой мебели, Алматы */
:root{
  --bg:#F2EEE4;
  --surface:#E7E2D6;
  --line:#D5D0C5;
  --ink:#1F2622;
  --muted:#514A43;
  --accent:#3E5E50;
  --accent-h:#324D41;
  --dark:#2C4438;
  --dark-line:rgba(242,238,228,.22);
  --on-dark:#F2EEE4;
  --on-dark-muted:#D3D6CC;
  --peach:#F4C89C;

  --serif:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --sans:'Onest','Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-body:17px;
  --fs-small:16px;
  --fs-cap:14px;
  --h1:clamp(42px,6vw,80px);
  --h2:clamp(34px,4vw,48px);
  --h3:clamp(22px,2.1vw,28px);

  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px;
  --section:clamp(64px,9vw,120px);
  --container:1200px;
  --pad:20px;
  --radius:0;
  --header-h:64px;
  --bar-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:960px){
  :root{--pad:40px;--header-h:76px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
@media (min-width:960px){body{padding-bottom:0}}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance;font-variant-numeric:lining-nums}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible,.footer :focus-visible{outline-color:var(--on-dark)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

.container{max-width:calc(var(--container) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.eyebrow{font:500 var(--fs-cap)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h2{font-size:var(--h2);line-height:1.05}
.lead{color:var(--muted);font-size:var(--fs-body);max-width:600px}
.sec-head{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-6)}
@media (min-width:960px){
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--sp-6)}
  .sec-head .lead{justify-self:end}
}
.nowrap{white-space:nowrap}

/* icons */
.icon{display:block;flex-shrink:0}
.plate{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);color:var(--accent);background:transparent}
.plate--lg{width:48px;height:48px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 22px;border:1px solid transparent;border-radius:var(--radius);
  font:500 16px/1.2 var(--sans);letter-spacing:.03em;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.btn-primary{background:var(--accent);color:var(--on-dark)}
.btn-primary:hover{background:var(--accent-h)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;text-decoration:none;color:var(--accent);border-bottom:1px solid currentColor}
.link-arrow:hover{color:var(--ink)}

/* header */
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:var(--sp-4);height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 24px/1 var(--serif);letter-spacing:0;color:var(--ink);margin-right:auto;min-height:44px}
.logo img{width:40px;height:40px;object-fit:cover}
.logo small{font:inherit;color:var(--accent)}
.nav{display:none}
.nav a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;text-decoration:none;font-size:16px;color:var(--ink)}
.nav a:hover{color:var(--accent)}
.langs{display:flex;border:1px solid var(--line)}
.langs button{min-width:48px;min-height:44px;padding:0 8px;border:0;background:transparent;font:500 14px/1 var(--sans);letter-spacing:.06em;cursor:pointer;color:var(--muted)}
.langs button+button{border-left:1px solid var(--line)}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.header .langs,.header-phone,.header-cta{display:none}
.header-phone{align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:500;white-space:nowrap}
.burger{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink)}
.burger .i-close{display:none}
.header.is-open .burger .i-menu{display:none}
.header.is-open .burger .i-close{display:block}
.mnav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;background:var(--bg);overflow-y:auto;padding:var(--sp-4) var(--pad) calc(var(--bar-h) + 32px)}
.mnav[hidden]{display:none}
.mnav ul a{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:1px solid var(--line);text-decoration:none;font:600 28px/1.1 var(--serif)}
.mnav .langs{display:flex;margin-top:var(--sp-5);width:max-content}
.mnav .header-phone{display:inline-flex;margin-top:var(--sp-4);font-size:18px}
@media (min-width:1200px){
  .nav{display:flex;gap:var(--sp-4)}
  .header .langs{display:flex}
  .header-cta{display:inline-flex;min-height:48px;padding-inline:18px;white-space:nowrap}
  .burger,.mnav{display:none!important}
}

/* hero */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:flex-end;color:var(--on-dark);overflow:hidden}
.hero-text{position:relative;z-index:1;padding:120px var(--pad) calc(var(--bar-h) + 24px)}
.hero-media{position:absolute;inset:0;margin:0}
.hero-media>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,24,.04) 0%,rgba(20,28,24,.12) 32%,rgba(20,28,24,.68) 50%,rgba(20,28,24,.88) 66%,rgba(20,28,24,.94) 100%)}
.hero .eyebrow{color:var(--on-dark-muted)}
.hero h1{font-size:var(--h1);line-height:1;margin-top:var(--sp-2)}
.hero-lead{margin-top:var(--sp-3);font-size:17px;max-width:520px;color:var(--on-dark)}
.trust{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:var(--sp-3)}
.trust a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:500;font-size:16px}
.trust a:hover{text-decoration:underline;text-underline-offset:3px}
.trust .star{color:var(--peach)}
.hero-cta{display:none;flex-wrap:wrap;gap:10px;margin-top:var(--sp-3)}
.hero-cta .btn{flex:1 1 220px}
.hero .btn-primary{background:var(--bg);color:var(--ink)}
.hero .btn-primary:hover{background:#fff}
.hero .btn-ghost{border-color:rgba(242,238,228,.85);color:var(--on-dark)}
.hero .btn-ghost:hover{background:var(--on-dark);color:var(--ink)}

@media (min-width:960px){
  .hero{
    display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;
    max-width:1280px;margin-inline:auto;min-height:0;
    padding:48px var(--pad) 64px;color:var(--ink);overflow:visible;
  }
  .hero-text{padding:0;max-width:620px}
  .hero-media{
    position:relative;inset:auto;justify-self:end;
    aspect-ratio:4/5;width:auto;max-width:100%;
    height:min(calc(100svh - var(--header-h) - 112px),760px);min-height:460px;
    background:var(--surface);
  }
  .hero-media::after{display:none}
  .hero .eyebrow{color:var(--muted)}
  .hero-lead{color:var(--muted);font-size:18px}
  .trust a{color:var(--ink)}
  .trust .star{color:var(--accent)}
  .hero .btn-primary{background:var(--accent);color:var(--on-dark)}
  .hero .btn-primary:hover{background:var(--accent-h)}
  .hero .btn-ghost{border-color:var(--ink);color:var(--ink)}
  .hero .btn-ghost:hover{background:var(--ink);color:var(--bg)}
  .hero-cta{display:flex}
  .hero-cta .btn{flex:0 0 auto}
}

/* facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts ul{display:grid;grid-template-columns:1fr 1fr}
.facts li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 12px 20px 0}
.facts li:nth-child(even){padding-left:12px;border-left:1px solid var(--line)}
.facts li:nth-child(n+3){border-top:1px solid var(--line)}
.facts b{display:block;font-weight:500;font-size:16px;line-height:1.3}
.facts div>span{display:block;color:var(--muted);font-size:15px;line-height:1.4;margin-top:2px}
@media (min-width:960px){
  .facts ul{grid-template-columns:repeat(4,1fr)}
  .facts li{flex-direction:row;gap:var(--sp-2);padding:28px 24px;border:0!important;border-left:1px solid var(--line)!important}
  .facts li:first-child{border-left:0!important;padding-left:0}
  .facts b{font-size:17px}
}

/* works */
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 12px}
.work{margin:0}
.work .ph{aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover img{transform:scale(1.035)}
.work figcaption{padding-top:12px}
.work h3{font-size:clamp(19px,2vw,24px);line-height:1.15}
.work p{margin-top:6px;font:500 13px/1.45 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.works-more{margin-top:var(--sp-6)}
@media (min-width:960px){
  .works-grid{grid-template-columns:repeat(3,1fr);gap:48px 28px}
  .work p{font-size:var(--fs-cap)}
}

/* make (types) */
.make{background:var(--surface)}
.rows{border-top:1px solid var(--ink)}
.row{display:grid;gap:var(--sp-2);padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}
.row-num{font:600 20px/1 var(--serif);color:var(--accent);font-variant-numeric:lining-nums}
.row h3{font-size:clamp(28px,3vw,38px);line-height:1.05}
.row-desc{color:var(--ink)}
.row-spec{margin-top:6px;color:var(--muted);font-size:var(--fs-small)}
@media (min-width:960px){
  .row{grid-template-columns:72px 280px 1fr 220px;gap:var(--sp-5);align-items:start;padding:40px 0}
  .row-num{padding-top:10px}
  .row .link-arrow{justify-self:end}
}

/* inside */
.inside-grid{display:grid;gap:var(--sp-5)}
.inside-media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inside-media figure{margin:0}
.inside-media .ph{aspect-ratio:3/4;overflow:hidden;background:var(--surface)}
.inside-media img,.inside-media video{width:100%;height:100%;object-fit:cover}
.inside-media video{pointer-events:none}
.inside-media figcaption{padding-top:10px;font:500 13px/1.45 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.details{display:grid;gap:0;border-top:1px solid var(--line)}
.details li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.details .plate{width:36px;height:36px}
.details b{display:block;font-weight:500;line-height:1.35}
.details div>span{display:block;color:var(--muted);font-size:var(--fs-small);line-height:1.5;margin-top:2px}
@media (min-width:960px){
  .inside-grid{grid-template-columns:1.6fr 1.15fr;gap:56px;align-items:start}
  .inside-media{gap:24px}
  .inside-media .ph{aspect-ratio:2/3}
  .inside-media figcaption{font-size:var(--fs-cap)}
}

/* process — dark */
.process{background:var(--dark);color:var(--on-dark)}
.process .eyebrow,.process .lead{color:var(--on-dark-muted)}
.steps{display:grid;gap:0;counter-reset:step}
.step{padding:var(--sp-5) 0;border-top:1px solid var(--dark-line)}
.step-num{font:600 56px/1 var(--serif);color:var(--on-dark);font-variant-numeric:lining-nums}
.step h3{font-size:var(--h3);line-height:1.15;margin-top:var(--sp-3)}
.step p{margin-top:var(--sp-2);color:var(--on-dark-muted)}
.process-cta{margin-top:var(--sp-6)}
.process .btn-primary{background:var(--bg);color:var(--ink)}
.process .btn-primary:hover{background:#fff}
@media (min-width:700px){.steps{grid-template-columns:1fr 1fr;column-gap:var(--sp-5)}}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(4,1fr);column-gap:32px}
  .step{padding-top:var(--sp-5)}
  .step-num{font-size:72px}
}

/* reviews */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:var(--sp-2)}
.rev-score{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.rev-score .star{color:var(--accent)}
.rev-grid{display:grid;gap:var(--sp-4)}
.rev{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface);margin:0}
.stars{display:flex;gap:3px;color:var(--accent)}
.rev blockquote{margin:0;font-size:var(--fs-small);line-height:1.6}
.rev figcaption{margin-top:auto;padding-top:var(--sp-2);border-top:1px solid var(--line)}
.rev cite{display:block;font-style:normal;font-weight:500}
.rev small{display:block;color:var(--muted);font-size:15px}
@media (min-width:760px){.rev-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.rev-grid{grid-template-columns:repeat(3,1fr);gap:28px}.rev{padding:32px}}

/* calc form */
.calc{background:var(--surface)}
.calc-grid{display:grid;gap:var(--sp-5)}
.calc-aside .lead{margin-top:var(--sp-3)}
.calc-phone{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.calc-phone div>span{display:block;color:var(--muted);font-size:15px}
.calc-phone a{font-weight:500;text-decoration:none;font-size:18px}
.calc-phone a:hover{color:var(--accent)}
.form{display:grid;gap:var(--sp-4);background:var(--bg);padding:var(--sp-4);border:1px solid var(--line)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend,.form label.lbl{display:block;font-weight:500;margin-bottom:10px;padding:0}
.form .opt-mark{font-weight:400;color:var(--muted)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{position:relative;display:flex}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 10px;border:1px solid var(--line);background:var(--bg);text-align:center;line-height:1.25;font-size:16px}
.choice input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.field input,.field textarea{display:block;width:100%;min-height:52px;padding:12px 14px;border:1px solid #BDB6A8;background:#FBF9F4;border-radius:0;font-size:16px;scroll-margin-bottom:120px}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6B645B}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form .btn{width:100%}
.form-note{color:var(--muted);font-size:15px;line-height:1.5}
@media (min-width:960px){
  .calc-grid{grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
  .form{padding:var(--sp-5)}
  .choices{grid-template-columns:repeat(4,1fr)}
}

/* instagram */
.ig-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.ig-profile{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:500}
.ig-profile:hover{color:var(--accent)}
.ig-profile .muted{color:var(--muted);font-weight:400}
.ig-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--surface)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ig-grid a:hover img{transform:scale(1.04)}
@media (min-width:760px){.ig-grid{grid-template-columns:repeat(4,1fr);gap:16px}}

/* faq */
.faq-grid{display:grid;gap:var(--sp-5)}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font-weight:500;font-size:18px;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .icon{transition:transform .25s}
.faq-list details[open] summary .icon{transform:rotate(180deg)}
.faq-list details p{padding:0 0 20px;color:var(--muted);max-width:640px}
@media (min-width:960px){
  .faq-grid{grid-template-columns:1fr 1.6fr;gap:72px;align-items:start}
  .faq-grid .h2{position:sticky;top:calc(var(--header-h) + 32px)}
}

/* contacts */
.contacts{border-top:1px solid var(--line)}
.contacts-grid{display:grid;gap:var(--sp-5)}
.contacts .lead{margin-top:var(--sp-3)}
.clist{margin-top:var(--sp-5);border-top:1px solid var(--line)}
.clist li{display:flex;align-items:flex-start;gap:var(--sp-3);padding:14px 0;border-bottom:1px solid var(--line)}
.clist .lbl{display:block;color:var(--muted);font-size:15px;line-height:1.4}
.clist .val{display:block;font-weight:500;line-height:1.45;margin-top:2px}
.clist a.val{text-decoration:none}
.clist a.val:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.map{display:grid;gap:var(--sp-3)}
.map iframe{display:block;width:100%;height:340px;border:1px solid var(--line);background:var(--surface)}
.map .btn{justify-self:start}
@media (min-width:960px){
  .contacts-grid{grid-template-columns:1fr 1.15fr;gap:72px;align-items:stretch}
  .map{grid-template-rows:1fr auto}
  .map iframe{height:100%;min-height:520px}
}

/* footer */
.footer{background:var(--dark);color:var(--on-dark);padding-block:56px 40px}
.footer-in{display:grid;gap:var(--sp-5)}
.footer .logo{color:var(--on-dark);margin:0}
.footer .logo small{color:var(--peach)}
.footer p{color:var(--on-dark-muted);margin-top:var(--sp-2);max-width:420px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--on-dark)}
.footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--dark-line);color:var(--on-dark)}
.socials a:hover{background:var(--on-dark);color:var(--dark)}
.footer-bottom{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--dark-line);color:var(--on-dark-muted);font-size:15px}
@media (min-width:960px){
  .footer-in{grid-template-columns:1.2fr 1fr auto;align-items:start}
}

/* mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);transition:transform .25s}
.mbar .btn{flex:1;min-height:52px;padding-inline:12px}
.mbar .btn-call{flex:0 0 52px;padding:0}
body.typing .mbar{transform:translateY(110%)}
@media (max-width:359px){.mbar .btn-primary .icon{display:none}}
@media (min-width:960px){.mbar{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .work:hover img,.ig-grid a:hover img{transform:none}
}