:root {

  --navy: #0A1428;

  --gold: #c8a96a;

  --text: #ffffff;

  --muted: #d5cdbd;

  --line: rgba(200, 169, 106, 0.72);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  background: var(--navy);

  color: var(--text);

  font-family: "Inter", Arial, sans-serif;

  overflow-x: hidden;

}



/* HEADER */



.site-header {

  background: var(--navy);

}



.nav {

  width: 100%;

  height: 195px;

  position: relative;

  border-bottom: 1px solid var(--line);

}



.nav-link {

  position: absolute;

  top: 62px;

  color: #C5A059;

  font-family: "Wix Madefor Text", "Inter", sans-serif;

  font-size: 25px;

  line-height: 1;

  letter-spacing: 0.02em;

  text-decoration: underline;

  text-underline-offset: 5px;

}



.nav-center {

  left: 50%;

  transform: translateX(-50%);

}



.nav-right {

  right: 78px;

}



/* HERO */



.hero {

  height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.logo {

  width: min(820px, 75vw);

  height: auto;

}



/* FULL WIDTH IMAGES */



.full-image {

  width: 100vw;

  margin-left: calc(50% - 50vw);

  display: block;

}



.image-one {

  height: auto;

  object-fit: contain;

  object-position: top;

  filter: brightness(55%);

}



.image-two {

  height: auto;

  object-fit: contain;

}



/* SECTIONS */



.section {

  width: calc(100% - 120px);

  margin: 0 auto;

}



.section-about {

  padding: 110px 0 150px;

}



.section-about h1 {

  margin-left: 70px;

  margin-top: 55px;

}



.section-about .text-block p {

  font-size: 28px;

  line-height: 1.45;

}



.content-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 160px;

}



h1,

h2 {

  font-family: "Fraunces", serif;

  font-size: 84px;

  line-height: 1.05;

  font-weight: 500;

  margin: 0;

}



.text-block {

  max-width: 720px;

}



.gold-line {

  height: 1px;

  width: 100%;

  background: var(--gold);

  margin-bottom: 40px;

}



p {

  font-family: "Wix Madefor Text", "Inter", sans-serif;

  font-size: 24px;

  color: #BFB79E;

  line-height: 1.5;

  margin-bottom: 20px;

}



/* APPROACH */



.section-approach {

  padding: 120px 0 260px;

}



.approach-title {

  margin-bottom: 80px;

  position: relative;

}



.approach-title::after {

  content: "";

  display: block;

  width: 147px;

  height: 1px;

  background: #C5A059;

  margin-top: 20px;

}



.approach-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 80px;

}



.card-line {

  height: 1px;

  width: 100%;

  background: var(--gold);

  margin-bottom: 60px;

}



.approach-card h3 {

  font-family: "Fraunces", serif;

  font-size: 32px;

  margin-bottom: 20px;

  font-weight: 400;

  padding-left: 50px;

}



.approach-card p {

  font-family: "Wix Madefor Text", "Inter", sans-serif;

  font-size: 23px;

  color: #BFB79E;

  line-height: 1.5;

  max-width: 480px;

  padding-left: 50px;

}



/* CONTACT */



.section-contact {

  padding: 50px 0 0;

}



.section-contact h2 {

  margin-left: 70px;

  position: relative;

}



.section-contact h2::after {

  content: "";

  position: absolute;

  left: -8px;

  bottom: -12px;

  width: 123px;

  height: 1px;

  background: #C5A059;

}



.contact-block {

  display: flex;

  flex-direction: column;

  gap: 60px;

  margin-left: -50px;

}



.contact-item {

  display: flex;

  align-items: center;

  gap: 16px;

}



.contact-item .icon {

  width: 28px;

  height: 28px;

  flex: 0 0 28px;

  color: #C5A059;

  display: block;

  position: relative;

  top: 0;

}



.contact-item a {

  font-family: "Wix Madefor Text", "Inter", sans-serif;

  font-size: 28px;

  color: var(--text);

  text-decoration: underline;

}



.section-contact .content-grid {

  grid-template-columns: 0.9fr 1.3fr;

}



.section-contact .full-image {

  margin-top: 180px;

}



/* FOOTER */



.footer {

  width: 100%;

  padding: 95px 0 70px;

  text-align: center;

  transform: translateX(-35px);

}



.footer-line {

  height: 1px;

  width: calc(100% - 160px);

  margin: 0 auto 70px;

  background: var(--gold);

}



.footer p {

  font-family: "Wix Madefor Text", "Inter", sans-serif;

  font-size: 22px;

  color: #BFB79E;

  line-height: 1.4;

  margin: 0 0 45px;

}



.footer .legal {

  font-size: 13px;

  line-height: 1.4;

  margin: 0;

}



/* RESPONSIVE */



@media (max-width: 900px) {



  .nav {

    height: 95px;

  }



  .nav-link {

    font-size: 16px;

    top: 32px;

  }



  .nav-right {

    right: 24px;

  }



  .hero {

    height: 300px;

  }



  .logo {

    width: 82vw;

  }



  .section {

    width: calc(100% - 36px);

  }



  h1,

  h2 {

    font-size: 48px;

    line-height: 1.05;

  }



  .content-grid,

  .approach-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 38px;

  }



  .section-about {

    padding: 70px 0 90px;

  }



  .section-about h1 {

    margin-left: 0;

    margin-top: 0;

  }



  .section-about .text-block p,

  .text-block p {

    font-size: 19px;

    line-height: 1.5;

  }



  .section-approach {

    padding: 70px 0 100px;

  }



  .approach-title {

    margin-bottom: 55px;

  }



  .approach-card h3,

  .approach-card p {

    padding-left: 0;

  }



  .approach-card h3 {

    font-size: 25px;

  }



  .approach-card p {

    font-size: 17px;

    max-width: 100%;

  }



  .card-line {

    margin-bottom: 38px;

  }



  .section-contact {

    padding: 65px 0 0;

  }



  .section-contact .content-grid {

    display: block;

  }



  .section-contact h2 {

    margin-left: 0;

    margin-bottom: 60px;

  }



  .section-contact h2::after {

    left: 0;

    bottom: -25px;

    width: 105px;

  }



  .contact-block {

    margin-left: 0;

    gap: 32px;

    max-width: 320px;

  }



  .contact-item {

    display: flex;

    align-items: center;

    gap: 12px;

  }



  .contact-item .icon {

    width: 20px;

    height: 20px;

    flex: 0 0 20px;

    color: #C5A059;

    display: block;

    position: relative;

    top: 0;

  }



  .contact-item a {

    font-size: 20px;

    line-height: 1.25;

    white-space: nowrap;

  }



  .section-contact .full-image {

    margin-top: 70px;

  }



  .image-two {

    width: 100vw;

    height: auto;

  }



  .footer {

    transform: none;

    padding: 70px 0 45px;

  }



  .footer-line {

    width: calc(100% - 60px);

    margin-bottom: 48px;

  }



  .footer p {

    font-size: 20px;

    line-height: 1.35;

    margin: 0 auto 32px;

    max-width: 320px;

  }



  .footer .legal {

    font-size: 13px;

    line-height: 1.45;

    max-width: 330px;

    margin: 0 auto;

  }

}