:root {
  --brown:#59463d;
  --brown2:#6a554b;
  --tan:#d6a06b;
  --tan2:#f4ead7;
  --cream:#f5ecd8;
  --text:#3e3832;
  --line:#cdb990;
  --brick:#8b5a43;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    linear-gradient(90deg,rgba(0,0,0,.08) 1px, transparent 1px) 0 0/86px 40px,
    linear-gradient(0deg,rgba(0,0,0,.11) 1px, transparent 1px) 0 0/86px 40px,
    linear-gradient(135deg,#8a5744 0,#b47c61 24%,#6f4436 25%,#9b6651 52%,#55392f 53%,#b1785d 100%);
  line-height:1.42;
}
a{color:inherit;text-decoration:none}
.wrapper{
  width:1100px;
  max-width:calc(100% - 36px);
  margin:16px auto 0;
}
.top{
  height:260px;
  display:grid;
  grid-template-columns:1fr 285px;
  background:var(--tan2);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  overflow:hidden;
}
.hero{
  position:relative;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02)),
    url('https://web.archive.org/web/20180224235644im_/http://westhouse39.ru/wp-content/files_mf/4.jpg');
  background-size:cover;
  background-position:center;
}
.hero:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:92px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));
}
.hero-slogan{
  position:absolute;left:20px;bottom:32px;z-index:2;
  color:#f6c169;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:33px;
  letter-spacing:4px;
  line-height:1.05;
  text-shadow:2px 2px 1px #5b3723, 0 0 5px #fff;
}
.brand{
  background:#f5ead5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-left:1px solid rgba(0,0,0,.08);
}
.standard{
  text-transform:uppercase;
  font-weight:700;
  font-size:14px;
  color:#5d4c44;
  margin-bottom:18px;
}
.house-logo{
  width:102px;height:92px;
  margin-bottom:18px;
  position:relative;
}
.house-logo:before{
  content:"";
  position:absolute;left:7px;right:7px;top:0;height:48px;
  background:#c99a67;
  clip-path:polygon(50% 0,100% 55%,78% 55%,78% 100%,22% 100%,22% 55%,0 55%);
}
.house-logo:after{
  content:"";
  position:absolute;left:28px;right:28px;bottom:0;height:45px;background:#5c4a42;
}
.brand-title{
  font-size:34px;
  line-height:1;
  font-weight:800;
  color:#5c4a42;
  letter-spacing:.5px;
}
.brand-title span{color:#c99a67}
.brand-sub{font-size:13px;text-transform:uppercase;font-weight:700;letter-spacing:2px;color:#6a5d55}
.brand-phone{font-size:29px;color:#5b514c;margin-top:22px}
.menu{
  background:linear-gradient(#dea76e,#cf975e);
  height:52px;
  display:flex;
  align-items:stretch;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.menu a{
  color:#2f2924;
  text-transform:uppercase;
  font-size:14px;
  padding:17px 18px;
  border-right:1px solid rgba(74,48,31,.35);
  border-left:1px solid rgba(255,255,255,.2);
  white-space:nowrap;
}
.menu a.active,.menu a:hover{background:var(--brown);color:#fff}
.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
  margin-top:22px;
}
.sidebar{
  align-self:start;
}
.sidebox{
  background:var(--cream);
  border-radius:5px;
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:0 3px 11px rgba(0,0,0,.22);
}
.side-title{
  background:var(--brown);
  color:#fff;
  font-size:21px;
  font-weight:700;
  padding:12px 34px;
}
.side-menu{
  margin:0;
  padding:16px 34px 26px;
  list-style:none;
}
.side-menu a{
  display:block;
  padding:4px 0;
  color:#6d5d52;
  font-size:17px;
  line-height:1.18;
}
.side-menu a:hover{color:#2b211b}
.review{
  padding:0 0 8px;
  font-size:14px;
}
.review-inner{padding:8px 0 0}
.review p{margin:0 0 6px}
.review a{text-decoration:underline;color:#6d5d52}
.main{
  background:var(--cream);
  min-height:800px;
  box-shadow:0 3px 11px rgba(0,0,0,.22);
}
.main-title{
  background:var(--brown);
  color:#fff;
  padding:11px 32px;
  font-size:20px;
  font-weight:700;
  border-radius:5px 5px 0 0;
}
.main-inner{
  padding:40px 32px 48px;
}
.icons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 44px;
  margin:0 auto 34px;
  max-width:650px;
}
.icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.icon-circle{
  width:96px;height:96px;
  border-radius:50%;
  background:
    linear-gradient(90deg,rgba(0,0,0,.08) 1px, transparent 1px) 0 0/26px 20px,
    linear-gradient(0deg,rgba(0,0,0,.12) 1px, transparent 1px) 0 0/26px 20px,
    linear-gradient(135deg,#8a5744,#b47c61,#6f4436);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffd46b;
  font-size:45px;
  border:2px dashed rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.12);
}
.caption{
  width:170px;
  min-height:86px;
  background:var(--tan);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:13px;
  color:#5f4d43;
  text-transform:uppercase;
  font-size:14px;
}
.content h1{
  margin:0 0 18px;
  font-size:22px;
  font-weight:700;
}
.content h2{
  margin:22px 0 10px;
  font-size:18px;
}
.content p,.content li{
  font-size:14px;
  color:#26211d;
}
.content p{margin:0 0 14px}
.content ul,.content ol{padding-left:22px}
.content li{margin:4px 0}
.footer{
  margin-top:24px;
  background:#4b3b33;
  color:#d9cabb;
  padding:18px 24px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.inner-page{
  background:var(--cream);
  box-shadow:0 3px 11px rgba(0,0,0,.22);
  padding:35px;
}
.inner-page h1{margin:0 0 18px;color:#2d2825}
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:22px 0;
}
.card{
  background:#fff8eb;
  border:1px solid var(--line);
  padding:18px;
}
.card h3{margin:0 0 8px;color:#59463d}
.form input,.form textarea{
  width:100%;
  border:1px solid var(--line);
  padding:12px;
  margin-bottom:12px;
  font:inherit;
}
.btn{
  display:inline-flex;
  background:var(--brown);
  color:#fff;
  padding:12px 22px;
  text-transform:uppercase;
  font-weight:700;
}
@media(max-width:1000px){
  .top{grid-template-columns:1fr;height:auto}
  .hero{height:260px}
  .brand{padding:28px 0}
  .menu{height:auto;flex-wrap:wrap}
  .layout{grid-template-columns:1fr}
  .icons,.cards{grid-template-columns:1fr}
  .caption{width:100%}
  .wrapper{max-width:calc(100% - 18px)}
}