/* ==========================================================
   Стройинвест — стили сайта
   Палитра взята из логотипа: графит + терракота
   ========================================================== */

:root{
  --graphite:#2E3438;
  --graphite-light:#3C4448;
  --terracotta:#C0703F;
  --terracotta-dark:#A85D2F;
  --sand:#F5F1EC;
  --sand-deep:#EFE7DE;
  --text:#4A4F52;
  --muted:#8A8F92;
  --line:#E3DDD6;
  --white:#fff;
  --container:1180px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
h1,h2,h3,h4{margin:0;color:var(--graphite);font-weight:600}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ---------------------- кнопки ---------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--terracotta);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  padding:12px 20px;
  border:0;
  cursor:pointer;
  font-family:var(--font);
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{background:var(--terracotta-dark)}
.btn:active{transform:translateY(1px)}

.btn__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  flex:none;
}
.btn__arrow svg{width:10px;height:10px;fill:var(--white)}

.btn--big{
  font-size:14px;
  padding:18px 30px;
  gap:16px;
  letter-spacing:.12em;
}
.btn--big .btn__arrow{width:26px;height:26px}
.btn--big .btn__arrow svg{width:14px;height:14px}

.btn--small{padding:10px 16px;font-size:11px}

/* ---------------------- шапка ---------------------- */

.header{
  position:relative;
  z-index:20;
  background:var(--white);
}

.header__inner{
  display:flex;
  align-items:center;
  gap:32px;
  padding-top:18px;
  padding-bottom:18px;
}

.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{width:52px;height:52px;object-fit:contain}
.logo__text{display:flex;flex-direction:column;line-height:1.1}
.logo__name{
  font-size:21px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--graphite);
}
.logo__tagline{
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}

.header__contacts{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:13px;
  margin-right:auto;
}
.contact{display:flex;align-items:center;gap:8px;color:var(--text)}
.contact svg{width:13px;height:13px;fill:var(--terracotta);flex:none}
.contact--phone{color:var(--graphite);font-weight:600;font-size:14px}
a.contact:hover{color:var(--terracotta)}

.search{display:flex;flex:none}
.search input{
  width:190px;
  border:1px solid var(--line);
  border-right:0;
  padding:8px 12px;
  font-size:13px;
  font-family:var(--font);
  color:var(--text);
  outline:none;
  background:var(--white);
}
.search input:focus{border-color:var(--terracotta)}
.search button{
  border:0;
  background:var(--terracotta);
  width:38px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.search button:hover{background:var(--terracotta-dark)}
.search button svg{width:15px;height:15px;fill:var(--white)}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:40px;height:34px;
  padding:8px;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--graphite);transition:.25s}
.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)}

/* ---------------------- меню ---------------------- */

.nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav ul{
  display:flex;
  justify-content:space-between;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav a{
  display:block;
  padding:18px 4px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--graphite);
  border-bottom:3px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover{color:var(--terracotta)}
.nav a.is-active{color:var(--terracotta);border-bottom-color:var(--terracotta)}

/* ---------------------- обложка ---------------------- */

.hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--sand-deep);
}
.hero__art{position:absolute;inset:0;width:100%;height:100%}
.hero__inner{position:relative;z-index:2;width:100%}

.hero__box{
  max-width:520px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  padding:38px 40px 42px;
  border-left:5px solid var(--terracotta);
}
.hero__eyebrow{
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:700;
  margin-bottom:14px;
}
.hero h1{
  font-size:40px;
  line-height:1.18;
  letter-spacing:.01em;
  margin-bottom:18px;
  font-weight:600;
}
.hero__lead{font-size:16px;color:var(--text);margin-bottom:26px}

.hero__dots{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  display:flex;
  gap:9px;
  z-index:3;
}
.hero__dots button{
  width:11px;height:11px;
  border:2px solid var(--terracotta);
  background:transparent;
  padding:0;
  cursor:pointer;
}
.hero__dots button.is-active{background:var(--terracotta)}

/* ---------------------- секции ---------------------- */

.section{padding:78px 0}
.section--sand{background:var(--sand)}

.section__title{
  display:flex;
  align-items:center;
  gap:26px;
  margin-bottom:48px;
  font-size:26px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--graphite);
}
.section__title::before,
.section__title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.section__title span{flex:none;text-align:center}

/* ---------------------- услуги ---------------------- */

.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:var(--white);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(46,52,56,.13);
  border-color:transparent;
}
.card__art svg{width:100%;height:auto}
.card__body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.card h3{
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin-bottom:12px;
}
.card p{font-size:13.5px;line-height:1.6;flex:1}
.card .btn{align-self:flex-start;margin-top:8px}

/* ---------------------- преимущества ---------------------- */

.advantages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}
.adv{
  background:var(--white);
  padding:30px 26px;
  border-bottom:3px solid var(--terracotta);
}
.adv__icon{margin-bottom:16px}
.adv__icon svg{width:46px;height:46px}
.adv h3{
  font-size:16px;
  margin-bottom:10px;
}
.adv p{font-size:13.5px;line-height:1.6;margin:0}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:48px;
  padding-top:38px;
  border-top:1px solid var(--line);
  text-align:center;
}
.stat b{
  display:block;
  font-size:34px;
  font-weight:600;
  color:var(--terracotta);
  line-height:1.1;
}
.stat span{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------------------- карусель объектов ---------------------- */

.carousel{display:flex;align-items:center;gap:14px}

.carousel__arrow{
  flex:none;
  width:34px;height:44px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:color .2s;
}
.carousel__arrow:hover{color:var(--terracotta)}

.carousel__viewport{
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carousel__viewport::-webkit-scrollbar{display:none}

.carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * 24px) / 3);
  gap:24px;
}

.object__art{
  border:1px solid var(--line);
  overflow:hidden;
  margin-bottom:16px;
}
.object__art svg{width:100%;height:auto;transition:transform .4s ease}
.object:hover .object__art svg{transform:scale(1.05)}
.object h3{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--terracotta);
  margin-bottom:8px;
}
.object p{font-size:13px;line-height:1.6;margin:0}

/* ---------------------- футер ---------------------- */

.footer{background:var(--graphite);color:#B9BEC0;font-size:13.5px}

.footer__inner{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.2fr;
  gap:48px;
  padding-top:60px;
  padding-bottom:52px;
}
.footer h4{
  color:var(--white);
  font-size:13px;
  letter-spacing:.14em;
  margin-bottom:20px;
}
.footer a:hover{color:var(--terracotta)}

.logo--footer{margin-bottom:20px}
/* логотип графитовый — на тёмном фоне ему нужна светлая подложка */
.logo--footer img{background:var(--sand);padding:5px;border-radius:2px}
.logo--footer .logo__name{color:var(--white)}
.logo--footer .logo__tagline{color:#7E8588}
.footer b{color:var(--white);font-weight:600}

.footer__col p{line-height:1.7}
.footer__phone{
  display:block;
  font-size:22px;
  font-weight:600;
  color:var(--white);
  margin-bottom:6px;
}
.footer__col a{display:block;margin-bottom:14px}

.form input,
.form textarea{
  width:100%;
  background:var(--graphite-light);
  border:1px solid #4B5458;
  color:var(--white);
  padding:11px 14px;
  margin-bottom:10px;
  font-size:13.5px;
  font-family:var(--font);
  outline:none;
  resize:vertical;
}
.form input::placeholder,
.form textarea::placeholder{color:#7E8588}
.form input:focus,
.form textarea:focus{border-color:var(--terracotta)}
.form input.is-error,
.form textarea.is-error{border-color:#E06B4A}

.form__note{
  margin:12px 0 0;
  font-size:12.5px;
  min-height:18px;
}
.form__note.is-ok{color:#9CCB8F}
.form__note.is-error{color:#E8917A}

.footer__bottom{
  border-top:1px solid #414A4E;
  padding:18px 0;
  font-size:12px;
  color:#7E8588;
}
.footer__bottom .container{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

/* ==========================================================
   Адаптив
   ========================================================== */

@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,1fr)}
  .advantages{grid-template-columns:repeat(2,1fr)}
  .carousel__track{grid-auto-columns:calc((100% - 24px) / 2)}
  .search input{width:140px}
  .hero h1{font-size:34px}
}

@media (max-width:900px){
  .header__inner{flex-wrap:wrap;gap:18px}
  .header__contacts{font-size:12.5px;margin-right:0}
  .search{order:3;flex:1}
  .search input{width:100%}
  .burger{display:flex;order:2;margin-left:auto}

  .nav{max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:0}
  .nav.is-open{max-height:420px;border-bottom:1px solid var(--line)}
  .nav ul{flex-direction:column}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);border-left:3px solid transparent}
  .nav a.is-active{border-bottom-color:var(--line);border-left-color:var(--terracotta);padding-left:12px}

  .footer__inner{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
}

@media (max-width:600px){
  .section{padding:52px 0}
  .section__title{font-size:19px;gap:14px;margin-bottom:32px}
  .services{grid-template-columns:1fr}
  .advantages{grid-template-columns:1fr}
  .carousel__track{grid-auto-columns:100%}
  .carousel{gap:6px}
  .carousel__arrow{width:24px}

  .hero{min-height:0;padding:44px 0 64px}
  .hero__box{padding:26px 22px 30px;background:rgba(255,255,255,.93)}
  .hero h1{font-size:27px}
  .hero__lead{font-size:14.5px}
  .hero__lead br{display:none}
  .btn--big{font-size:12px;padding:15px 20px}

  .header__contacts{width:100%}
  .logo img{width:44px;height:44px}
  .logo__name{font-size:18px}
  .footer__bottom .container{flex-direction:column;gap:6px}
}