*{
    box-sizing: border-box;
}

@font-face {
    font-family:"Open Sans Semibold";
    src:url("fonts/OpenSans-Semibold.eot?") format("eot"),url("fonts/OpenSans-Semibold.woff") format("woff"),url("fonts/OpenSans-Semibold.ttf") format("truetype"),url("fonts/OpenSans-Semibold.svg#OpenSans-Semibold") format("svg");
    font-weight:normal;
    font-style:normal;
}

  
html {
    scroll-behavior: smooth;
}
  
body{
    font-family: 'Open Sans Semibold', sans-serif !important;
    font-size: clamp(16px, 4vw, 20px);
    margin: 0;
    padding: 0px;
    line-height: 1.5;
}
  
h1,
h2,
h3,
h4,
h5,
p{
    padding: 0;
    margin: 0;
}
  
p, li{
    padding: 10px 0;
    line-height: 1.5;
}
  
a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
  
img{
    display: block;
    max-width: 100%;
    max-height: 100%;
}
  
ul{
    margin: 0;
    padding: 0;
}
  
  .container{
    width: auto;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
  }
  
  @media screen and (min-width: 480px) {
    .container{
    max-width: 450px;
    }
  }
  @media screen and (min-width: 575px){
    .container{
      max-width: 540px;
    }
  }
  @media screen and (min-width: 768px) {
    .container{
    max-width: 730px;
    }
  }
  @media screen and (min-width: 992px) {
    .container{
      max-width: 960px;
    }
  }
  
  @media screen and (min-width: 1200px){
    .container{
      max-width: 1170px;
      }
  }
  
  @media (min-width: 1400px){
    .container{
      max-width: 1274px;
    }
  }

.site-nav{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    letter-spacing: .02em;
    font-size: 12px;
    text-transform: uppercase;
  }
.site-nav .nav-item{ 
    color:#111; 
    opacity:.9; 
}
.site-nav .nav-item:hover{ 
    opacity:1; 
}

.bold{
    color: #000;
    font-weight: bold;
}

.site-nav--hero{ 
    justify-content: space-between; 
    padding-top: 20px; 
    width: 100%;
    margin-bottom: 12px; 
}

  .hero{
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    min-height: 100vh;
    border-bottom: 1px solid #e9e9e9;
}

.hero__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.hero__content{
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .hero__inner{ 
    padding-top: 50px; 
    padding-bottom: 40px; 
  }
.hero__title{
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    color: #111;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 38ch;
  }

.link-underline{
    text-decoration: underline;
    text-decoration-color: orange;
  }

  .hero__cta{ 
    height: 48px;
    display:flex; 
    align-items: center; 
    gap: 2px; 
    margin-top: 24px; 
}
.btn{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    border:1px solid #111; 
    color:#111;
    padding: 12px 22px; 
    font-size: 12px; 
    letter-spacing:.08em; 
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
  }
  .btn--primary{ 
    background:#111; 
    color:#fff; 
}
  .btn--long{ 
    height: 100%;
    min-width: 280px; 
    width: 100%; 
    justify-content: center; 
}
  .btn--primary:hover{ 
    background:#000; 
}
  .btn--icon{ 
    width:48px; 
    height:48px; 
    padding:0; 
    background: #111; 
    color:#111; 
    border: 1px solid #111;
}

.btn--icon span{
    color: #fff;
    font-size: 16px;
}
  .btn--icon:hover{ 
    opacity: 0.7;
}

  .hero__meta{
    width: 100%;
    padding-top: 60px;
    padding-bottom: 12px;
    display:flex; 
    align-items:flex-end; 
    justify-content: space-between;
    color:#6a6a6a; 
    font-size: 10px; 
    letter-spacing:.12em; 
    text-transform: uppercase;
  }
.eyebrow{ 
    font-size: 12px;
    display:block; 
    line-height:1.2; 
}

  
.section--content{ 
    display:grid; 
    grid-template-columns: 120px 1fr; 
    gap: 24px; 
    padding-top: 80px; 
    padding-bottom: 40px; 
}
.section__index{ 
    color:#9b9b9b; 
    font-size: 12px; 
    letter-spacing:.1em; 
}
  .section--content .copy{ 
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px; 
    margin: 0 auto; 
}
.section--content .copy p{ 
    color:#000; 
    font-size: clamp(16px, 2.4vw, 20px); 
}
.link-bracket{ 
    font-size:12px; 
    letter-spacing:.12em; 
    text-transform: uppercase; 
    color:#000; 
}
.link-bracket:hover{ opacity:.7; }

  
.mosaic{
    position: relative;
    display:grid; 
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 50px;
    padding: 0 20px;
    overflow: visible;
}
 .mosaic__item--left{ grid-column: 1; justify-self: start; }
 .mosaic__item--center{ grid-column: 2; transform: translateY(120px); justify-self: center; position: relative; }
 .mosaic__item--center::before{ content:""; position:absolute; inset:-40px; background:#f3f3f3; z-index:0; border-radius: 2px; }
 .mosaic__item--right-top{ grid-column: 3; transform: translateY(-140px); justify-self: end; }

 .mosaic__item--left img{ width: 400px; }
 .mosaic__item--right-top img{ width: 280px; }
 .card{ position: relative; z-index: 1; padding: 100px; }
 .card img{ 
    margin: 0 auto; 
    width: 400px; 
    height: auto; 
    object-fit: cover; 
}

  @media (max-width: 1024px){
    .hero{ grid-template-columns: 1fr; min-height: 100%;}
    .hero__media{ aspect-ratio: auto; }
    .section--content{ grid-template-columns: 80px 1fr; }
    .mosaic{ grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 32px; padding-bottom: 120px; }
    .mosaic__item--left{ grid-column: 1; }
    .mosaic__item--center{ grid-column: 1 / span 2; transform: translateY(40px); justify-self: center; }
    .mosaic__item--right-top{ grid-column: 2; transform: translateY(-40px); }
    .mosaic{ grid-template-columns: 1fr; gap: 20px; padding: 0 0 60px; }
    .mosaic__item--left,
    .mosaic__item--center,
    .mosaic__item--right-top{ grid-column: auto; transform: none; justify-self: stretch; }
    .mosaic__item--center::before{ content: unset; }
    .mosaic__item--left img,
    .mosaic__item--right-top img,
    .card img{ width: 100%; max-width: none; max-height: 50vh; object-fit: cover; }
    .card{ padding: 0; }
    .hero__media img{
        max-height: 50vh;
    }
  }

  @media (max-width: 680px){
    body{ 
        font-size: 15px; 
    }
  .site-nav{ 
        gap: 16px; font-size: 10px; 
    }
  .hero__inner{ 
        padding-top: 20px; padding-bottom: 28px; 
    }
  .hero__title{ 
        font-size: 24px; 
    }
  .btn{ 
        padding: 10px 16px; font-size: 11px; 
    }
  .section--content{ 
        padding-top: 56px; 
    }
  .mosaic{ 
        gap: 14px; padding: 12px 12px 64px; 
    }
    .site-nav{ justify-content: space-between; }
    .section--content{ grid-template-columns: 1fr; gap: 8px; }
    .section__index{ order: -1; }
  }

  @media (max-width: 360px){
  .hero__title{ 
        font-size: 22px; 
    }
  .btn{ 
        padding: 9px 14px; 
    }
  }