:root{
  --brand-brown:#5E463D;
  --brand-gold:#C6A87C;
  --brand-dark:#262626;
  --brand-yellow:#FBBF24;
  --bg-dark:#2D2D2D;

  --font-sans:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-display:"Oswald", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-serif:"Playfair Display", Georgia, serif;

  --container: 1280px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:#1f2937;
  background:#fff;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

.page{ width:100%; min-height:100vh; }

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

.navbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  padding:16px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
}
@media (min-width:768px){
  .navbar__inner{ padding:0 48px; }
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--brand-brown);
}
.brand__mark{
  color:var(--brand-brown);
}
.brand__text{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--brand-brown);
  line-height:1;
}

.nav{
  text-transform:uppercase;
  letter-spacing:.08em;
}

.nav--desktop{
  display:none;
  gap:32px;
  font-size:12px;
  font-weight:500;
  color:#4b5563;
}
@media (min-width:768px){
  .nav--desktop{ display:flex; }
}

.nav__link{
  text-decoration:none;
  color:#4b5563;
  transition:color .2s ease;
}
.nav__link:hover{ color:var(--brand-brown); }
.nav__link--active{ color:#ca8a04; }

.nav-toggle{
  border:0;
  background:transparent;
  color:#374151;
  cursor:pointer;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width:768px){
  .nav-toggle{ display:none; }
}
.nav-toggle__icon{ display:none; }
.nav-toggle[data-state="closed"] .nav-toggle__icon--menu{ display:block; }
.nav-toggle[data-state="open"] .nav-toggle__icon--close{ display:block; }

.nav--mobile{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  background:#fff;
    max-width: 100vw;
    overflow: hidden;
  border-top:1px solid #e5e7eb;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  padding:12px 0;
}
.nav--mobile.is-open{ display:flex; flex-direction:column; align-items:stretch; }

.nav__item{
  text-decoration:none;
  color:#111827;
  padding:10px 0;
  text-align:center;
  transition:background .2s ease, color .2s ease;
}
.nav__item:hover{ background:#f9fafb; }
.nav__item--active{ color:#ca8a04; }

.hero{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  min-height:550px;
}
@media (min-width:768px){
  .hero{ grid-template-columns:1fr 1fr; }
}

.hero__left{
  background:var(--brand-brown);
  color:#fff;
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (min-width:768px){
  .hero__left{ padding:80px; }
}

.hero__title{
  margin:0 0 24px 0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.05;
  font-size:48px;
}


@media (min-width:768px){ .hero__title{ font-size:60px; } }
@media (min-width:1024px){ .hero__title{ font-size:72px; } }

.hero__desc{
  margin:0;
  color:#e5e7eb;
  font-weight:300;
  line-height:1.75;
  font-size:18px;
  max-width:520px;
}

.hero__right{
  position:relative;
  background:#e5e7eb;
  height:400px;
}
@media (min-width:768px){
  .hero__right{ height:auto; }
}
.hero__img{ width:100%; height:100%; object-fit:cover; }

.hero__watermark{
  position:absolute;
  right:32px;
  bottom:32px;
  opacity:.4;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.hero__watermark-inner{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
}
.hero__watermark-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:48px;
  letter-spacing:.18em;
  line-height:1;
}
.hero__watermark-mark{ color:#fff; }

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  margin:0 0 48px 0;
  font-size:36px;
}
.section-title--brown{ color:var(--brand-brown); }

.services-preview{
  padding:64px 0;
}
@media (min-width:768px){
  .services-preview{ padding:96px 0; }
}

.services-preview__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:0;
  margin:0;
}
@media (min-width:768px){
  .services-preview__grid{ grid-template-columns:repeat(3, 1fr); }
}

.service-card{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  border:none;
  box-shadow:none;
}
.service-card__media{
  height:340px;
  width:100%;
  margin:0;
  overflow:hidden;
  margin-bottom:0;
  padding:0;
  border:none;
}
@media (min-width:768px){
  .service-card__media{ height:420px; width:100%; }
}
.service-card__media img{
  transition:none;
  margin:0;
  padding:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  width:100%;
  height:100%;
  display:block;
}
.service-card__title{
  margin:24px 0 0 0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:24px;
  color:var(--brand-gold);
}

.about{
  width:100%;
  background:var(--brand-brown);
  position:relative;
  overflow:visible;
}

.about__row{
  display:flex;
  flex-direction:column;
  min-height:600px;
}
@media (min-width:768px){
  .about__row{ flex-direction:row; }
}


.about__left{
  width:100%;
  color:#fff;
  position:relative;
  z-index:10;
}
@media (min-width:768px){
  .about__left{ width:40%; max-width:480px; padding:80px; padding-left:16px; margin-left:auto; margin-right:0; }
}

.about__title{
  margin:0 0 32px 0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:40px;
}
@media (min-width:768px){
  .about__title{ font-size:48px; }
}

.about__subtitle{
  margin:0 0 24px 0;
  font-weight:700;
  font-size:20px;
}

.about__p{
  margin:0 0 24px 0;
  color:#d1d5db;
  font-weight:300;
  line-height:1.8;
}
.about__right{
  position:relative;
  width:100%;
  min-height:600px;
  display:flex;
}

@media (min-width:768px){
  .about__right{
    width:60%;
    min-height:600px;
  }
}

.about__imgwrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0;
  width:100%;
}




.about__icon{
  width:100px;
  height:auto;
  object-fit:contain;
  opacity:.85;
  margin-bottom:18px;  
}
.about__icon{
  align-self:center;
  margin-bottom:0; 
}


.about__photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
  border-radius: 18px;
}




@media (max-width:767px){
  .about__right{
    min-height: auto;
  }

  .about__imgwrap{
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;

    padding: 16px 24px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    overflow: hidden;
  }

  .about__photo{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
  }

  .about__icon{
    display: none;
  }
}



.about__overlay{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:256px;
  height:256px;
  opacity:.2;
  pointer-events:none;
  z-index:20;
}
@media (min-width:768px){
  .about__overlay{ display:block; }
}
.about__overlay-svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:#fff;
  stroke-width:2;
}

.why{
  padding:80px 0;
}
.why__row{
  display:flex;
  flex-direction:column;
    gap:0;
}
@media (min-width:1024px){
  .why__row{
    flex-direction:row;
    gap:64px;
  }
}

.why__left{
  width:100%;
}
@media (min-width:1024px){
  .why__left{ width:33.333%; }
}
.why__kicker{
  margin:0 0 16px 0;
  font-weight:700;
  font-size:20px;
}
.why__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.1;
  font-size:40px;
  color:var(--brand-dark);
}
@media (min-width:768px){
  .why__title{ font-size:48px; }
}

.why__right{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  column-gap:48px;
  row-gap:40px;
}
@media (min-width:1024px){
  .why__right{ width:66.666%; }
}
@media (min-width:768px){
  .why__right{ grid-template-columns:1fr 1fr; }
}

.why-item{
  display:flex;
  gap:16px;
}
.why-item__icon{
  flex:0 0 auto;
  padding-top:4px;
  width:24px;
  height:24px;
  color:var(--brand-yellow);
}
.why-item__icon svg{
  width:24px;
  height:24px;
  display:block;
}
.why-item__body h4{
  margin:0 0 8px 0;
  font-weight:700;
  font-size:18px;
}
.why-item__body p{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.7;
}

.work{ width:100%; }
.work__band{
  background:var(--brand-brown);
  padding:48px 0;
  text-align:center;
}
.work__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:40px;
  color:#fff;
}
@media (min-width:768px){
  .work__title{ font-size:48px; }
}

.work__grid{
  background:var(--brand-brown);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap: 18px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 40px;
}
@media (min-width:768px){
  .work__grid{ grid-template-columns:repeat(4, 1fr); padding-left: 64px; padding-right: 64px; padding-bottom: 56px; }
}
@media (min-width:1024px){
  .work__grid{
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:1fr;
    padding-left: 120px;
    padding-right: 120px;
    padding-bottom: 72px;
  }
}

.work__cell{
  display:block;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#9ca3af;
  border-radius: 12px;
  color:#fff;
  text-decoration:none;
}
.work__cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .3s ease;
}
.work__cell:hover img{
  filter:grayscale(0);
}
.work__cell--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:.02em;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.work__empty{
  grid-column:1 / -1;
  margin:0;
  padding:18px 12px;
  text-align:center;
  color:#f5f5f5;
  font-size:16px;
  font-weight:500;
}

.detailed{
  padding:96px 0;
}
.detailed__grid{
  display:grid;
  grid-template-columns:1fr;
  column-gap:32px;
  row-gap:64px;
}
@media (min-width:768px){
  .detailed__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1024px){
  .detailed__grid{ grid-template-columns:repeat(3, 1fr); }
}

.detail-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.detail-card__media{
  width:100%;
  height:192px;
  margin-bottom:24px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-card__media img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.detail-card__title{
  margin:0 0 16px 0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:20px;
  color:var(--brand-brown);
}
@media (min-width:768px){
  .detail-card__title{ font-size:24px; }
}
.detail-card__desc{
  margin:0;
  max-width:320px;
  color:#6b7280;
  font-size:14px;
  line-height:1.8;
}

.footer{
  width:100%;
  background:var(--bg-dark);
  color:#fff;
  padding-top:64px;
  padding-bottom:24px;
}

.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  margin-bottom:64px;
}
@media (min-width:768px){
  .footer__top{ grid-template-columns:1fr 1fr; }
}

.footer__kicker{
  margin:0 0 8px 0;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--brand-yellow);
}

.footer__phone{
  display:inline-block;
  margin:0 0 16px 0;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--brand-yellow);
  text-decoration:none;
  font-size:40px;
  transition:color .2s ease;
}
@media (min-width:768px){
  .footer__phone{ font-size:48px; }
}
.footer__phone:hover{ color:#fde68a; }

.footer__mail{
  display:inline-block;
  margin-bottom:4px;
  color:#9ca3af;
  text-decoration:none;
  transition:color .2s ease;
}
.footer__mail:hover{ color:#fff; }

.footer__addr{
  margin:0;
  color:#9ca3af;
  font-size:14px;
  line-height:1.6;
}

.footer__about-title{
  margin:0 0 16px 0;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:700;
  text-transform:uppercase;
  color:#9ca3af;
}
.footer__about{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.8;
  max-width:720px;
}

.footer__bottom{
  border-top:1px solid #374151;
  padding-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
@media (min-width:768px){
  .footer__bottom{
    flex-direction:row;
  }
}

.footer__copyright{
  margin:0;
  font-size:12px;
  color:var(--brand-yellow);
}

.footer__social{
  display:flex;
  gap:16px;
  align-items:center;
}

.footer__social-link{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--brand-yellow);
  transition:color .2s ease;
}
.footer__social-link svg{
  width:16px;
  height:16px;
  display:block;
}
.footer__social-link:hover{ color:#fff; }

.footer__social-link--gplus{
  width:auto;
  height:auto;
  font-weight:700;
  font-size:12px;
}