
:root{
  --green:#75b843;
  --green2:#95ca64;
  --blue:#279bd8;
  --blue2:#83c9ec;
  --brown:#7b5d3f;
  --sand:#d6c8b1;
  --paper:#ffffff;
  --text:#585858;
  --muted:#929292;
  --line:#e8e1d6;
  --soft:#faf9f6;
  --shadow:0 16px 42px rgba(100,80,50,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
}
a{color:#2388c4;text-decoration:underline}
.container{
  width:960px;
  max-width:calc(100% - 32px);
  margin:0 auto;
}
.header{
  padding:34px 0 24px;
}
.header-grid{
  display:grid;
  grid-template-columns:210px 1fr 160px 210px;
  gap:22px;
  align-items:start;
}
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.logo-mark{
  position:relative;
  width:120px;
  height:120px;
  flex:none;
}
.cloud{
  position:absolute;
  left:16px;
  top:8px;
  width:90px;
  height:48px;
  background:var(--blue);
  border-radius:38px;
}
.cloud:before,.cloud:after{
  content:"";
  position:absolute;
  background:var(--blue);
  border-radius:50%;
}
.cloud:before{width:52px;height:52px;left:14px;top:-20px}
.cloud:after{width:48px;height:48px;right:10px;top:-11px}
.house-icon{
  position:absolute;
  left:37px;
  top:45px;
  width:54px;
  height:54px;
  background:#fff;
  clip-path:polygon(50% 0,100% 45%,85% 45%,85% 100%,15% 100%,15% 45%,0 45%);
}
.house-icon:after{
  content:"";
  position:absolute;
  left:21px;
  bottom:0;
  width:13px;
  height:22px;
  background:var(--blue);
}
.hill{
  position:absolute;
  left:13px;
  top:86px;
  width:98px;
  height:40px;
  border-top:7px solid var(--green);
  border-radius:50%;
  transform:rotate(-9deg);
}
.bird,.bird:before{
  position:absolute;
  content:"";
  width:16px;height:9px;
  border-top:2px solid #e6d9c7;
  border-radius:50%;
}
.bird{left:5px;top:36px;transform:rotate(-18deg)}
.bird:before{left:135px;top:-18px;transform:rotate(25deg)}
.logo-text{
  min-width:255px;
  margin-left:2px;
}
.logo-text strong{
  display:block;
  color:#111;
  font-size:31px;
  line-height:1;
  letter-spacing:.4px;
  text-decoration:none;
}
.logo-text span{
  display:block;
  color:#777;
  font-size:17px;
  line-height:1.1;
  margin-top:3px;
  text-transform:lowercase;
}
.intro{
  font-size:13px;
  color:#444;
  padding-top:52px;
}
.menu{
  padding-top:37px;
  font-size:18px;
  line-height:1.7;
}
.menu a{display:block}
.contacts-top{
  padding-top:35px;
  text-align:left;
}
.phone{
  font-weight:700;
  color:#111;
  font-size:18px;
  margin-bottom:8px;
}
.waves{
  height:16px;
  background:
    radial-gradient(12px 7px at 12px 2px, transparent 9px, rgba(199,190,174,.35) 10px, transparent 11px) repeat-x;
  background-size:28px 16px;
  opacity:.8;
}
.layout{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:54px;
  padding:42px 0 40px;
}
.maincol{min-width:0}
.sidebar{
  font-size:13px;
  color:#666;
}
.sidebar-block{
  margin-bottom:28px;
}
.sidebar-image{
  width:100%;
  height:88px;
  margin:12px 0 8px;
  border-radius:4px;
  background:#f3f3f3;
  position:relative;
  overflow:hidden;
}
.sidebar-image:before{
  content:"";
  position:absolute;
  left:0;right:0;top:35px;height:9px;
  background:#ececec;
  border-radius:9px;
}
.sidebar-ad{
  height:132px;
  background:
    radial-gradient(circle at 80% 30%,rgba(255,185,49,.8),transparent 34%),
    linear-gradient(135deg,#8b3b8f,#ef8553 58%,#f7d35d);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:20px;
  text-align:center;
  border-radius:2px;
}
.sidebar-ad.blue{
  background:linear-gradient(135deg,#4ab3eb,#005d9c);
}
.big-section{
  margin-bottom:34px;
}
.section-title{
  display:flex;
  align-items:flex-end;
  min-height:100px;
  margin-bottom:12px;
  position:relative;
}
.section-title h1,.section-title h2{
  margin:0;
  color:#bbb4ad;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:34px;
  line-height:1.08;
}
.section-title:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:18px;
  background:
    radial-gradient(10px 8px at 10px 0, transparent 8px, #e5ded4 9px, transparent 10px) repeat-x;
  background-size:22px 18px;
}
.section-title.build{
  background:
    linear-gradient(to right, transparent 0 42%, rgba(255,255,255,.75) 43% 100%),
    linear-gradient(180deg,transparent 0 52%,#cfcfcf 53%,#cfcfcf 65%,transparent 66%),
    linear-gradient(135deg,#d8af7b,#fff 52%,#7ac144 53%);
}
.section-title.build:before{
  content:"";
  position:absolute;
  right:10px;
  bottom:3px;
  width:395px;height:75px;
  background:
    linear-gradient(135deg,#a65f36,#d29a62);
  clip-path:polygon(7% 100%,25% 30%,52% 0,82% 22%,100% 100%);
  opacity:.92;
}
.section-title.zagr{
  background:
    linear-gradient(180deg,transparent 0 75%,#9bd666 76%,#9bd666 86%,transparent 87%),
    linear-gradient(90deg,transparent 0 68%,#e9f5df 68% 100%);
}
.section-title.zagr:before{
  content:"";
  position:absolute;
  right:36px;
  bottom:4px;
  width:185px;height:92px;
  background:
    linear-gradient(135deg,#fff 0 35%,#c2493d 36% 50%,#fff 51% 100%);
  clip-path:polygon(0 100%,18% 46%,36% 30%,53% 8%,75% 35%,100% 100%);
}
.section-title.land{
  background:
    linear-gradient(180deg,transparent 0 75%,#a2713f 76%,#a2713f 82%,transparent 83%);
}
.section-title.land:before{
  content:"";
  position:absolute;
  right:56px;
  bottom:7px;
  width:230px;height:86px;
  background:
    linear-gradient(180deg,transparent 0 42%,#a4774e 43% 52%,transparent 53%),
    radial-gradient(circle at 30% 35%,transparent 0 35px,#a4774e 36px 42px,transparent 43px),
    radial-gradient(circle at 70% 35%,transparent 0 35px,#a4774e 36px 42px,transparent 43px);
}
.banner{
  position:relative;
  margin:28px 0 17px;
  min-height:188px;
  border:1px solid #d6c8b1;
  box-shadow:var(--shadow);
  background:
    linear-gradient(180deg,rgba(58,25,8,.07),rgba(80,42,10,.18)),
    linear-gradient(135deg,#d8a067,#e8c598 55%,#7a5133 56%);
  overflow:hidden;
}
.banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.25) 49%,transparent 50%),
    radial-gradient(circle at 82% 24%,#85bf52 0 26px,transparent 27px),
    radial-gradient(circle at 75% 30%,#6fa843 0 22px,transparent 23px);
}
.banner.house:after{
  content:"";
  position:absolute;
  right:55px;bottom:30px;
  width:430px;height:120px;
  background:#8d5433;
  box-shadow:-230px 25px 0 -5px #af7444;
}
.banner .descr{
  position:absolute;
  left:20px;
  bottom:16px;
  color:#fff;
  background:rgba(0,0,0,.45);
  padding:10px 12px;
  font-size:12px;
}
.text{
  font-size:14px;
}
.photo-title{
  margin:22px 0 10px;
  color:#7e6e60;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
}
.gallery{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}
.gallery .thumb{
  width:94px;height:70px;
  background:
    linear-gradient(135deg,#c9925e,#fff 55%,#8bc267);
  border:1px solid #d6c8b1;
  box-shadow:0 4px 10px rgba(80,60,40,.12);
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:20px 0;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:22px;
}
.card h3{
  margin:0 0 10px;
  color:#6d9e35;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
}
.card p{font-size:14px;margin:0}
.cta{
  margin:28px 0;
  padding:28px;
  background:linear-gradient(135deg,#f8fbf2,#fff);
  border:1px solid #dfead3;
  border-radius:18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:12px 22px;
  border-radius:28px;
  font-weight:700;
  margin-top:10px;
}
.footer{
  border-top:1px solid var(--line);
  padding:28px 0 38px;
  color:#8a8a8a;
  font-size:13px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px;
}
.inner{
  padding:42px 0 70px;
}
.inner h1{
  color:#a9a19a;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400;
  font-size:38px;
  margin:0 0 22px;
}
.inner-box{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:34px;
  border-radius:14px;
}
.projects{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.project{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:16px;
}
.project-img{
  height:170px;
  background:linear-gradient(135deg,#c78e5b,#fff 55%,#83bf51);
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
}
.project-img:after{
  content:"";
  position:absolute;
  left:30px;right:30px;bottom:25px;height:72px;
  background:#9a5d38;
  clip-path:polygon(0 100%,18% 35%,50% 0,82% 35%,100% 100%);
}
.contact-row{
  margin-bottom:13px;
  font-size:17px;
}
.form input,.form textarea{
  width:100%;
  border:1px solid #ddd0c1;
  padding:13px;
  margin:0 0 12px;
}
@media(max-width:900px){
  .header-grid{grid-template-columns:1fr;text-align:center}
  .logo{justify-content:center}
  .intro,.menu,.contacts-top{padding-top:0}
  .layout{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .cards,.footer-grid{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
}
@media(max-width:560px){
  .container{max-width:calc(100% - 20px)}
  .logo{flex-direction:column}
  .logo-text{text-align:center;min-width:auto}
  .section-title h1,.section-title h2{font-size:29px}
  .banner.house:after{right:-80px;width:330px}
  .sidebar{grid-template-columns:1fr}
}
