/* Grand Build Group
   Идея: страница как облицованная стена. Фото — плитки, зазор между ними — шов.
   Цвета взяты из логотипа. */

:root{
  --ink:#0A1F33;
  --ink-2:#14304A;
  --bronze:#B67E22;
  --gold:#E0A932;
  --bronze-text:#7E5610;
  --plaster:#ECEEEC;
  --white:#FBFCFB;
  --slate:#4A5966;
  --mist:#B9C4CD;
  --line:#CFD5D3;

  --seam:3px;
  --head:76px;
  --gutter:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);

  --display:"Fira Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
  --heading:"Fira Sans Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Fira Sans",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 1.125rem/1.55 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

main{overflow-x:clip}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(64px,9vw,128px)}
.section--ink{background:var(--ink);color:var(--white)}

/* Типографика */
.h1{font:800 clamp(3.1rem,min(6.2vw,11vh),6.6rem)/.96 var(--display);letter-spacing:.002em}
.h2{font:800 clamp(2.6rem,5.2vw,4.5rem)/1 var(--display);letter-spacing:.003em}
.h3{font:700 clamp(1.5rem,2.2vw,1.85rem)/1.12 var(--heading)}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;max-width:60ch}
.muted{color:var(--slate)}
.section--ink .muted{color:var(--mist)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:2px solid transparent;border-radius:2px;font:700 1.15rem/1 var(--heading);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#F0BD52}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--ink-2)}
.btn--line{border-color:currentColor}
.btn--line:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.textlink{font:700 1.2rem/1.2 var(--heading);border-bottom:2px solid var(--bronze);padding-bottom:3px;transition:color .2s}
.textlink:hover{color:var(--bronze-text)}

/* Шапка */
.site-head{position:sticky;top:0;z-index:40;height:var(--head);background:var(--white);border-bottom:1px solid var(--line)}
.site-head__row{height:100%;display:flex;align-items:center;gap:28px;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0}
.brand img{width:58px;height:auto}
.brand b{display:block;font:800 1.2rem/1 var(--heading);letter-spacing:.01em}
.brand small{display:block;margin-top:3px;font:500 .8rem/1 var(--body);color:var(--slate)}
.nav{display:flex;gap:24px}
.nav a{position:relative;padding:8px 0;font-weight:600;font-size:1.05rem}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.lang{display:flex;border:1px solid var(--line);border-radius:2px}
.lang button{min-width:42px;height:40px;border:0;background:none;font-weight:700;font-size:.95rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.head-cta{min-height:44px;padding:0 18px;font-size:1.05rem;white-space:nowrap}
.burger{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:2px;background:none;cursor:pointer;place-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Плитка: базовый элемент всего сайта */
.tile{position:relative;display:block;overflow:hidden;padding:0;border:0;background:var(--ink);aspect-ratio:3/4;width:100%;text-align:left}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.tile:hover img,button.tile:hover img,a.tile:focus-visible img,button.tile:focus-visible img{transform:scale(1.04)}
a.tile,button.tile{cursor:pointer}
a.tile:focus-visible,button.tile:focus-visible{outline-offset:-5px}
.cap{position:absolute;left:0;bottom:0;max-width:calc(100% - 20px);padding:7px 12px;background:var(--ink);color:var(--white);font:600 1rem/1.25 var(--heading);transition:transform .3s var(--ease)}
.wall--hovercaps .cap{transform:translateY(101%)}
.wall--hovercaps .tile:hover .cap,.wall--hovercaps .tile:focus-visible .cap{transform:none}
@media (hover:none){.wall--hovercaps .cap{transform:none}}

.wall{display:grid;gap:var(--seam);grid-template-columns:repeat(4,minmax(0,1fr))}
.wall > *{min-width:0}
.wall__text{grid-row:span 2;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;background:var(--ink);color:var(--white)}
.wall__text .h3{font:800 clamp(2.2rem,3.4vw,3.2rem)/1 var(--display)}
.wall__text p{color:var(--mist);font-size:1.08rem;line-height:1.45}

/* «Плитка ложится на стену»: единый мотив появления */
.js .lay{opacity:0}
.js .lay.in{animation:lay .6s var(--ease) both;animation-delay:calc(var(--d,0)*1ms)}
@keyframes lay{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

/* Главный экран */
.hero{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,minmax(190px,1fr));gap:var(--seam);min-height:min(calc(100vh - var(--head)),1040px);min-height:min(calc(100svh - var(--head)),1040px);background:var(--white)}
.hero .tile{aspect-ratio:auto;height:100%}
.hero__text{grid-column:1/span 4;grid-row:1/span 2;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:clamp(24px,3.4vw,52px);background:var(--ink);color:var(--white)}
.hero__text .lead{color:#D5DDE3;max-width:46ch}

/* Работы на главной */
.works-head{padding-block:clamp(64px,9vw,128px) clamp(28px,4vw,48px)}
.works-head__row{display:flex;flex-wrap:wrap;gap:16px 56px;justify-content:space-between;align-items:flex-end}
.works-head p{max-width:46ch;margin-top:14px}
.tile--big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* Подход + этапы */
.section--after-wall{margin-top:clamp(64px,9vw,128px)}
.steps{margin:0;padding:0;list-style:none}
.approach{display:grid;grid-template-columns:5fr 6fr;gap:24px clamp(32px,6vw,96px);align-items:start}
.process{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);margin-top:clamp(48px,7vw,96px)}
.process__frame{position:sticky;top:calc(var(--head) + 24px);align-self:start;aspect-ratio:3/4;max-height:calc(100vh - var(--head) - 48px);width:100%;overflow:hidden;background:var(--ink-2)}
.process__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.process__frame img.on{opacity:1}
.step{min-height:44vh;padding-block:clamp(24px,5vh,56px);border-top:1px solid rgba(255,255,255,.2);display:flex;gap:24px;align-items:flex-start;opacity:.45;transition:opacity .35s}
.step.on{opacity:1}
.no-steps .step{opacity:1}
.step__n{font:800 clamp(3.4rem,6vw,5.4rem)/.85 var(--display);color:var(--gold);min-width:1.1ch}
.step .h3{margin-bottom:8px;font-size:clamp(2rem,3.2vw,2.8rem)}
.step p{font-size:clamp(1.1rem,1.5vw,1.3rem)}
.step__img{display:none}

/* Услуги-плитки на главной */
.services-head{padding-block:clamp(64px,9vw,128px) clamp(28px,4vw,48px)}
.services-head p{max-width:50ch;margin-top:14px}
.serv{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:1/1;padding:clamp(18px,2vw,28px);overflow:hidden;transition:background-color .25s}
.serv p{font-size:1rem;line-height:1.4}
.serv--ink{background:var(--ink);color:var(--white)}
.serv--ink p{color:var(--mist)}
.serv--ink:hover{background:var(--ink-2)}
.serv--white{background:var(--white)}
.serv--white p{color:var(--slate)}
.serv--white:hover{background:#fff}
.serv--gold{background:var(--gold)}
.serv--gold:hover{background:#F0BD52}
.serv--photo{color:var(--white);background:var(--ink);padding:0}
.serv--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.serv--photo:hover img{transform:scale(1.04)}
.serv__box{position:relative;padding:12px clamp(18px,2vw,28px) 16px;background:var(--ink)}
.serv__box p{color:var(--mist);margin-top:4px}

/* Призыв */
.cta{background:var(--gold);color:var(--ink);padding-block:clamp(48px,7vw,88px)}
.cta__row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.cta .h2{max-width:20ch}
.cta__phone{display:inline-block;font:800 clamp(2.2rem,4.4vw,3.6rem)/1 var(--display);border-bottom:3px solid var(--ink);padding-bottom:4px}
.cta__side{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}

/* Шапки внутренних страниц */
.page-head{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--seam);background:var(--white)}
.page-head__text{display:flex;flex-direction:column;justify-content:flex-end;gap:16px;min-height:clamp(300px,42vw,520px);padding:clamp(24px,4vw,60px) var(--gutter);background:var(--ink);color:var(--white)}
.page-head__text .h1{font-size:clamp(2.9rem,5.2vw,5.2rem)}
.page-head__text .lead{color:#D5DDE3}
.page-head .tile{aspect-ratio:auto;height:100%}

/* Галерея */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding-block:clamp(28px,4vw,44px)}
.chip{min-height:46px;padding:0 18px;border:2px solid var(--line);border-radius:2px;background:none;font:700 1.1rem/1 var(--heading);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.gallery{grid-auto-flow:dense;padding-bottom:var(--seam)}
.gallery .tile[hidden]{display:none}
.gallery.is-filtered .tile--big{grid-column:auto;grid-row:auto;aspect-ratio:3/4}

/* Просмотр фото */
.viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,18,30,.96);color:var(--white);overflow:hidden}
.viewer::backdrop{background:rgba(6,18,30,.96)}
.viewer[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}}
.viewer__stage{min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 76px 8px}
.viewer__stage img{max-width:100%;max-height:100%;object-fit:contain;animation:settle .35s var(--ease)}
@keyframes settle{from{opacity:0;transform:scale(1.03)}}
.viewer__bar{display:flex;justify-content:center;gap:16px;padding:10px 76px 18px;text-align:center}
.viewer__count{color:var(--mist);white-space:nowrap}
.viewer__btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:2px;background:rgba(255,255,255,.1);color:var(--white);cursor:pointer;transition:background-color .2s}
.viewer__btn:hover{background:rgba(255,255,255,.22)}
.viewer__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.viewer__prev{left:12px;top:50%;transform:translateY(-50%)}
.viewer__next{right:12px;top:50%;transform:translateY(-50%)}
.viewer__close{right:12px;top:12px}

/* Страница услуг */
.svc-block{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--seam);margin-bottom:var(--seam)}
.svc-block__text{grid-column:span 2;grid-row:span 2;padding:clamp(28px,4vw,60px);background:var(--white);display:flex;flex-direction:column;justify-content:center;gap:14px}
.svc-block--ink .svc-block__text{background:var(--ink);color:var(--white)}
.svc-block--ink .muted{color:var(--mist)}
.svc-block--short .svc-block__text{grid-row:auto}
.door-sales{margin-top:14px;display:grid;gap:14px}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:6px}
.ticks li{position:relative;padding-left:20px;font-size:1.02rem;line-height:1.4}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--bronze)}
.svc-solid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--seam);margin-bottom:var(--seam)}
.svc-solid article{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:clamp(220px,24vw,320px);padding:clamp(22px,2.4vw,32px)}
.svc-solid article:nth-child(odd){background:var(--ink);color:var(--white)}
.svc-solid article:nth-child(odd) p{color:var(--mist)}
.svc-solid article:nth-child(even){background:var(--white)}
.svc-solid article:nth-child(even) p{color:var(--slate)}
.svc-solid p{font-size:1.02rem;line-height:1.45}

/* О компании */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.about__photo{margin:0}
.about__text{display:grid;gap:18px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px,4vw,56px);margin-top:18px}
.values b{display:block;font:700 1.45rem/1.15 var(--heading);margin-bottom:4px}
.values span{color:var(--slate);font-size:1.05rem}
.legal{margin-top:20px;padding:20px 24px;background:var(--white);border-left:4px solid var(--bronze);font-size:1.02rem}
.legal b{display:block;font:700 1.3rem/1.2 var(--heading);margin-bottom:4px}
.legal p{line-height:1.5}

/* Контакты */
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact__list{display:grid;gap:22px}
.contact__list small{display:block;font-size:.98rem;color:var(--slate)}
.contact__list a,.contact__list span{font:700 1.4rem/1.25 var(--heading)}
.contact__list a{overflow-wrap:anywhere}
.contact__list a:hover{color:var(--bronze-text)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.field{display:grid;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-weight:600;font-size:1.02rem}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--line);border-radius:2px;background:var(--white);transition:border-color .2s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze)}
.form__status{grid-column:1/-1;min-height:1.5em;color:var(--bronze-text);font-weight:600}

/* Подвал */
.site-foot{background:var(--ink);color:var(--white);padding-block:clamp(48px,6vw,72px) 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:36px clamp(32px,6vw,96px)}
.foot-brand{display:inline-flex;align-items:center;gap:14px}
.foot-brand i{display:grid;place-items:center;width:64px;height:64px;background:var(--white)}
.foot-brand img{width:50px;height:auto}
.foot-brand b{font:800 1.3rem/1.1 var(--heading)}
.foot-grid p{color:var(--mist);margin-top:14px;max-width:38ch;font-size:1.02rem}
.foot-col{display:grid;gap:8px;align-content:start;font-size:1.05rem}
.foot-col h2{font:700 1.3rem/1.2 var(--heading);margin-bottom:4px}
.foot-col a{overflow-wrap:anywhere}
.foot-col a:hover{color:var(--gold)}
.foot-col span{color:var(--mist)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:44px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);color:var(--mist);font-size:.98rem}

/* Адаптив */
@media (max-width:1180px){
  .head-cta{display:none}
  .nav{gap:18px}
}
@media (max-width:980px){
  .site-head__row{gap:12px}
  .burger{display:grid}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gutter) 20px;background:var(--white);border-bottom:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .25s var(--ease),visibility .25s}
  .nav.open{visibility:visible;opacity:1;transform:none}
  .nav a{padding:13px 0;font-size:1.25rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--bronze-text)}
  .hero{grid-template-columns:repeat(4,1fr);grid-template-rows:none;min-height:0}
  .hero__text{grid-column:1/-1;grid-row:auto;padding-block:40px}
  .hero .tile{aspect-ratio:3/4;height:auto}
  .hero .tile:nth-child(n+10){display:none}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall__text{grid-column:1/-1;grid-row:auto}
  .tile--big{grid-row:auto;aspect-ratio:4/3}
  .approach,.about,.contact{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:0}
  .process__frame{display:none}
  .step{min-height:0;display:block;opacity:1;padding-block:28px}
  .step__n{display:block;margin-bottom:8px}
  .step__img{display:block;aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;margin-top:18px}
  .page-head{grid-template-columns:1fr 1fr}
  .page-head__text{grid-column:1/-1;min-height:0;padding-block:44px}
  .page-head .tile{aspect-ratio:4/3;height:auto}
  .svc-block{grid-template-columns:1fr 1fr}
  .svc-block__text{grid-column:1/-1;grid-row:auto}
  .svc-solid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1/-1}
}
@media (max-width:600px){
  :root{--head:66px}
  body{font-size:1.06rem}
  .brand img{width:48px}
  .brand small{display:none}
  .brand b{font-size:1.05rem;max-width:7.5em}
  .hero{grid-template-columns:repeat(3,1fr)}
  .hero .tile:nth-child(n+8){display:none}
  .btn-row .btn{flex:1 1 auto}
  .serv{aspect-ratio:auto;min-height:190px}
  .serv--photo{min-height:240px}
  .tile--big{aspect-ratio:3/4}
  .serv{padding:16px 14px}
  .serv .h3{font:800 1.6rem/1 var(--display)}
  .serv p{font-size:.95rem}
  .serv--photo{padding:0}
  .serv__box{padding:10px 14px 12px}
  .cap{font-size:.92rem;padding:5px 9px;max-width:calc(100% - 12px)}
  .ticks,.values,.form{grid-template-columns:1fr}
  .svc-solid{grid-template-columns:1fr}
  .svc-solid article{min-height:0}
  .foot-grid{grid-template-columns:1fr}
  .viewer__stage{padding:72px 8px 8px}
  .viewer__prev,.viewer__next{top:auto;bottom:14px;transform:none}
  .viewer__bar{padding-inline:72px;min-height:80px;align-items:center;flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .lay{opacity:1}
  .js .lay.in,.viewer[open],.viewer__stage img{animation:none}
  *{transition-duration:.01ms!important}
}