*{box-sizing:border-box}
:root{
  --black:#050505;
  --white:#f5f4f0;
  --gray:#8b8985;
  --line:#202020;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",Arial,sans-serif
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,a{font:inherit}
a{text-decoration:none;color:inherit}

.site-header{
  height:94px;
  border-bottom:1px solid #171717;
  background:#050505;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 4.05%;
  position:relative;
  z-index:20
}
.logo{font:600 29px/1 var(--serif);letter-spacing:-.03em}
.site-header nav{display:flex;gap:45px;align-items:center}
.site-header nav a{font-size:15px;color:#a4a29e;transition:.2s}
.site-header nav a:hover,.site-header nav a.active{color:#fff}
.bag{
  justify-self:end;
  border:0;background:transparent;color:#eee;
  display:flex;align-items:center;gap:12px;
  padding:0;cursor:pointer;font-size:15px
}
.bag-shape{
  display:block;width:21px;height:18px;border:1.5px solid #ddd;border-radius:2px;position:relative
}
.bag-shape:before{
  content:"";position:absolute;width:8px;height:6px;left:5px;top:-7px;
  border:1.5px solid #ddd;border-bottom:0;border-radius:7px 7px 0 0
}

.hero{
  height:calc(100vh - 94px);
  min-height:860px;
  position:relative;
  background-image:url("assets/hero-reference.jpg");
  background-size:cover;
  background-position:center center;
  display:flex;justify-content:center;align-items:center;
  overflow:hidden
}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.2) 48%,rgba(0,0,0,.52)),
             linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.22) 50%,rgba(0,0,0,.32))
}
.hero-copy{
  position:relative;text-align:center;margin-top:-30px;z-index:2;width:100%
}
.eyebrow,.section-kicker{
  color:#7f7d79;font-size:11px;font-weight:500;letter-spacing:.32em
}
.hero .eyebrow{margin-bottom:43px}
.hero h1{
  font:500 clamp(78px,6.7vw,126px)/.82 var(--serif);
  letter-spacing:-.052em;margin:0
}
.hero-copy p{
  color:#b2b0ac;font-size:18px;line-height:1.5;margin:44px 0 59px
}
.hero-button{
  display:inline-flex;align-items:center;gap:19px;
  min-width:304px;justify-content:center;
  background:#f5f4f1;color:#111;border-radius:999px;
  padding:20px 27px;font-weight:600;font-size:15px;
  box-shadow:0 1px 1px rgba(0,0,0,.25)
}
.hero-button span{font-size:23px;font-weight:400;line-height:0}

.featured{
  padding:71px 9.68% 120px;
  background:#050505
}
.featured .section-kicker{margin-bottom:18px}
.featured h2,.collection h1{
  font:500 55px/1 var(--serif);letter-spacing:-.04em;margin:0
}
.featured-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:43px;
  margin-top:69px
}
.card{display:block;min-width:0}
.card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #111;
  transition: transform .35s ease;
}

.card:hover img{transform:scale(.992)}
.card-line{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;padding-top:18px
}
.card h3{
  font:500 21px/1 var(--serif);letter-spacing:-.015em;margin:0 0 10px
}
.card small{
  color:#777572;font-size:9px;letter-spacing:.28em
}
.card strong{
  font:500 18px/1 var(--serif);white-space:nowrap
}

.collection{
  padding:47px 9.68% 120px
}
.collection-heading{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-bottom:64px
}
.collection .section-kicker{margin-bottom:20px}
.collection h1{font-size:56px}
.filters{
  display:flex;gap:12px;align-items:center;justify-content:flex-end;
  flex-wrap:wrap
}
.filter{
  border:1px solid #292929;background:transparent;color:#85837f;
  border-radius:999px;padding:13px 20px;
  font-size:10px;letter-spacing:.15em;cursor:pointer;
  height:49px;min-width:79px
}
.filter.selected{background:#f2f1ee;color:#111;border-color:#f2f1ee}
.filter:hover:not(.selected){border-color:#5c5c5c;color:#fff}
.collection-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:43px
}
.collection-grid .card:nth-child(3),
.collection-grid .card:nth-child(4){display:none}
.collection-grid .card img{aspect-ratio:2400/1384}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);
  background:#f4f3f0;color:#111;border-radius:999px;padding:13px 19px;
  font-size:12px;z-index:50;transition:.3s
}
.toast.show{transform:translate(-50%,0)}

.contact-cta {
  display: inline-block;
  margin-top: 55px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-size: 25px;
}

.contact {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 7vw;
  min-height: 780px;
  padding-top: 100px;
}

.contact-intro h2 {
  font-size: clamp(42px, 4vw, 68px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: 1.02;
  margin: 55px 0 45px
}

.contact-intro p {
  font-size: 18px;
  line-height: 1.5;
  color: #6a6a66
}

.contact-form {
  padding-top: 0
}

.contact-form label {
  display: block;
  margin-bottom: 70px
}

.contact-form label span {
  display: block;
  color: #8b8b87;
  font-size: 12px;
  letter-spacing: .24em;
  margin-bottom: 35px
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #bdbdb8;
  background: transparent;
  padding: 0 0 18px;
  font: inherit;
  font-size: 20px;
  outline: none;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--ink)
}

.contact-form button {
  margin-top: 5px;
  background: var(--dark);
  color: #fff;
  border: 0;
  padding: 23px 45px;
  font-size: 12px;
  letter-spacing: .22em;
  cursor: pointer
}

.contact-form button:hover {
  background: var(--accent)
}

.form-note {
  font-size: 14px;
  color: #777;
  margin-top: 20px
}

/* MOBILE */

@media(max-width:850px) {

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-form {
        margin-top: 55px;
    }

    .form-group {
        margin-bottom: 28px;
    }

}
@media(max-width:1000px){
  .site-header{height:82px;padding:0 28px}
  .hero{height:calc(100svh - 82px);min-height:700px}
  .hero h1{font-size:clamp(64px,8vw,96px)}
  .featured,.collection{padding-left:5%;padding-right:5%}
  .collection-heading{align-items:flex-start;flex-direction:column}
  .filters{justify-content:flex-start}
}
@media(max-width:650px){
  .site-header{height:70px}
  .site-header nav{display:none}
  .logo{font-size:25px}
  .hero{height:calc(100svh - 70px);min-height:650px}
  .hero .eyebrow{margin-bottom:28px}
  .hero h1{font-size:clamp(49px,14vw,74px);line-height:.88}
  .hero-copy p{font-size:14px;margin:30px auto 35px;padding:0 20px}
  .desktop{display:none}
  .hero-button{min-width:270px;padding:17px 24px}
  .featured{padding-top:58px}
  .featured h2,.collection h1{font-size:45px}
  .featured-grid,.collection-grid{grid-template-columns:1fr;gap:44px;margin-top:40px}
  .collection{padding-top:36px}
  .collection-heading{margin-bottom:40px}
  .filter{height:42px;padding:10px 15px}
  .collection-grid .card:nth-child(3),
  .collection-grid .card:nth-child(4){display:block}
}














/* =========================================================
   PROJECT REQUEST — SECTION CONTACT
   ========================================================= */

.project-request-section {
    position: relative;
    width: 100%;
    min-height: 100vh;

    padding: 140px 6vw 120px;

    background: var(--paper);
    color: var(--ink);

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

    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.project-request-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.project-request-intro {
    max-width: 850px;
}


.project-request-label {
    margin: 0;

    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--muted);
}


.project-request-title {
    margin: 38px 0 32px;

    font-family: var(--sans);
    font-size: clamp(70px, 8.5vw, 135px);
    font-weight: 600;

    line-height: .82;
    letter-spacing: -.085em;

    color: var(--ink);
}


.project-request-title em {
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
}


.project-request-description {
    width: 100%;
    max-width: 520px;

    margin: 0;

    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;

    color: var(--muted);
}


/* =========================================================
   FORM
   ========================================================= */

.project-request-form {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 900px;

    margin-top: 85px;
}


/* =========================================================
   TWO COLUMNS
   ========================================================= */

.project-request-fields {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 45px;
}


/* =========================================================
   FIELD
   ========================================================= */

.project-request-field {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin-bottom: 38px;
}


/* =========================================================
   LABEL
   ========================================================= */

.project-request-label-small {
    display: block;

    margin: 0 0 13px;

    font-family: var(--mono);
    font-size: 9px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--muted);
}


/* =========================================================
   INPUT
   ========================================================= */

.project-request-input {
    display: block;

    width: 100%;
    height: 52px;

    margin: 0;
    padding: 14px 2px;

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

    outline: none;

    background: transparent;

    color: var(--ink);

    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color .3s ease,
        padding-left .3s ease;
}


.project-request-input:hover {
    border-bottom-color: #aaa49a;
}


.project-request-input:focus {
    border-bottom-color: var(--ink);

    padding-left: 7px;
}


.project-request-input::placeholder {
    color: #aaa59c;

    opacity: 1;
}


/* =========================================================
   SELECT
   ========================================================= */

.project-request-select {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);

    background-position:
        calc(100% - 8px) 23px,
        calc(100% - 3px) 23px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


.project-request-select option {
    background: var(--paper);

    color: var(--ink);
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.project-request-textarea {
    display: block;

    width: 100%;
    min-height: 145px;

    margin: 0;
    padding: 15px 2px;

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

    outline: none;

    resize: vertical;

    background: transparent;

    color: var(--ink);

    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;

    box-shadow: none;

    transition:
        border-color .3s ease,
        padding-left .3s ease;
}


.project-request-textarea:hover {
    border-bottom-color: #aaa49a;
}


.project-request-textarea:focus {
    border-bottom-color: var(--ink);

    padding-left: 7px;
}


.project-request-textarea::placeholder {
    color: #aaa59c;

    opacity: 1;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.project-request-submit {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    width: auto;

    margin: 12px 0 0;
    padding: 0 0 13px;

    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;

    outline: none;

    background: transparent;

    color: var(--ink);

    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;

    letter-spacing: .02em;

    cursor: pointer;

    box-shadow: none;

    transition:
        opacity .25s ease,
        padding-right .25s ease;
}


.project-request-submit:hover {
    opacity: .6;

    padding-right: 5px;
}


.project-request-arrow {
    display: inline-block;

    margin-left: 40px;

    color: var(--coral);

    font-family: var(--sans);
    font-size: 16px;

    line-height: 1;

    transition: transform .3s ease;
}


.project-request-submit:hover .project-request-arrow {
    transform: translate(5px, -5px);
}


/* =========================================================
   SECONDARY DECORATION
   ========================================================= */

.project-request-section::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -150px;
    bottom: -100px;

    border-radius: 50%;

    background: #a4b68d;

    opacity: .08;

    filter: blur(50px);

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .project-request-section {
        min-height: auto;

        padding: 100px 7vw 90px;
    }


    .project-request-container {
        width: 100%;
    }


    .project-request-title {
        margin-top: 30px;

        font-size: 18vw;

        line-height: .84;
    }


    .project-request-description {
        max-width: 100%;

        font-size: 13px;
    }


    .project-request-form {
        margin-top: 60px;
    }


    .project-request-fields {
        grid-template-columns: 1fr;

        column-gap: 0;
    }


    .project-request-field {
        margin-bottom: 30px;
    }


    .project-request-input {
        height: 50px;
    }


    .project-request-textarea {
        min-height: 130px;
    }


    .project-request-decoration {
        width: 280px;
        height: 280px;

        right: -170px;
        top: 48%;
    }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 480px) {

    .project-request-section {
        padding: 80px 7vw;
    }


    .project-request-title {
        font-size: 19vw;
    }


    .project-request-form {
        margin-top: 50px;
    }


    .project-request-submit {
        font-size: 9px;
    }


    .project-request-arrow {
        margin-left: 25px;
    }

}