@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root {
  --pink:#dfb9bd;
  --rose:#c98f97;
  --cream:#fff7ea;
  --plum:#603e45;
  --pale:#f1d9d7;
  --ink:#55363d
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--pink);
  color:var(--cream);
  font-family:'DM Sans',Arial,sans-serif;
  font-weight:300
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500;
  line-height:.93
}
h2 {
  font-size:clamp(3rem,6vw,6.8rem)
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.73rem;
  font-weight:500
}
.nav {
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  height:78px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(#0005,transparent);
  color:var(--cream)
}
.brand {
  font-size:.82rem;
  letter-spacing:.15em;
  font-weight:500
}
.nav nav {
  display:flex;
  gap:2rem;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.13em
}
.nav nav a:hover {
  opacity:.65
}
.menu {
  display:none;
  background:none;
  border:0;
  color:inherit;
  font-size:1.5rem
}
.hero {
  height:100svh;
  min-height:650px;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden
}
.hero video {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:var(--plum)
}
.wash {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(74,38,46,.58),rgba(218,167,174,.18)),linear-gradient(0deg,rgba(58,31,36,.38),transparent 55%)
}
.hero-copy {
  position:relative;
  z-index:2;
  padding:0 6vw 9vh;
  max-width:950px
}
.hero h1 {
  font-size:clamp(5rem,11vw,10.5rem);
  letter-spacing:-.045em;
  margin:.1em 0
}
.hero-copy>p:not(.eyebrow) {
  font-size:clamp(1rem,1.6vw,1.3rem);
  margin-bottom:2rem
}
.btn {
  display:inline-block;
  padding:1rem 1.45rem;
  border:1px solid currentColor;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  background:transparent;
  cursor:pointer
}
.btn.light:hover {
  background:var(--cream);
  color:var(--plum)
}
.btn.dark {
  color:var(--plum)
}
.btn.dark:hover {
  background:var(--plum);
  color:var(--cream)
}
.intro {
  padding:12vw 9vw;
  text-align:center;
  max-width:1250px;
  margin:auto
}
.intro h2 {
  margin:.2em 0 .45em
}
.intro>p:last-child {
  max-width:720px;
  margin:auto;
  line-height:1.8;
  font-size:1.05rem
}
.work {
  padding:9vw 5vw;
  background:var(--cream);
  color:var(--plum)
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:3rem;
  margin-bottom:5vw
}
.section-head h2 {
  margin:.15em 0 0
}
.section-head>p {
  max-width:370px;
  line-height:1.7
}
.video-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2vw
}
.video-card {
  margin:0
}
.video-card.wide {
  grid-column:1 / -1;
  width:100%;
  justify-self:stretch
}
.video-card.wide video {
  width:calc((100% - 2vw) / 2);
  margin-inline:auto;
}
.video-card video {
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  height: auto;
  object-fit:cover;
  object-position:center center;
  background:transparent;
}
.video-card div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:1rem 0 2rem;
  border-top:1px solid #603e4544
}
.video-card span {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem
}
.video-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.5rem
}
.choreo {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:85vh;
  background:var(--plum)
}
.project-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.project-copy {
  padding:8vw 6vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.project-copy h2 {
  font-size:clamp(3.5rem,6vw,6rem);
  margin:.2em 0 .5em
}
.project-copy>p {
  line-height:1.75;
  max-width:540px
}
.quote {
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.7rem!important;
  margin:2rem 0
}
.project-copy .btn {
  align-self:flex-start;
  color:var(--cream)
}
.about {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:7vw;
  padding:10vw 8vw;
  align-items:center
}
.about-copy h2 {
  font-size:clamp(3.5rem,5.5vw,6rem);
  margin:.2em 0 .5em
}
.about-copy>p:not(.eyebrow) {
  max-width:650px;
  line-height:1.8
}
.portrait img {
  width:100%;
  max-height:760px;
  object-fit:cover;
  object-position:center 25%;
  box-shadow:28px 28px 0 var(--pale)
}
.cta {
  padding:12vw 6vw;
  background:var(--cream);
  color:var(--plum);
  text-align:center
}
.cta h2 {
  font-size:clamp(4.2rem,9vw,9rem);
  margin:.18em 0 .25em
}
.cta p:not(.eyebrow) {
  font-size:1.1rem
}
.cta a {
  display:inline-block;
  margin-top:1.5rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.72rem;
  border-bottom:1px solid;
  padding-bottom:.35rem
}
.contact {
  padding:10vw 8vw;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:10vw
}
.contact h2 {
  font-size:clamp(3.5rem,6vw,6rem);
  margin:.2em 0 .5em
}
.contact>div>p {
  max-width:460px;
  line-height:1.7
}
.socials {
  display:flex;
  gap:1.5rem;
  margin-top:2rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em
}
form {
  display:grid;
  gap:1.5rem
}
label {
  display:grid;
  gap:.5rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.68rem
}
input,select,textarea {
  width:100%;
  border:0;
  border-bottom:1px solid var(--cream);
  background:transparent;
  color:var(--cream);
  padding:.8rem 0;
  font:inherit;
  outline:none
}
select option {
  color:#222
}
textarea {
  resize:vertical
}
form .btn {
  justify-self:start;
  color:var(--cream)
}
form small {
  opacity:.75;
  line-height:1.5
}
footer {
  background:var(--plum);
  padding:2rem 5vw;
  display:flex;
  justify-content:space-between;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em
}
@media(max-width:760px) {
  .nav nav {
    display:none;
    position:absolute;
    top:70px;
    right:4vw;
    background:var(--plum);
    padding:1.5rem;
    flex-direction:column
  }
  .nav nav.open {
    display:flex
  }
  .menu {
    display:block
  }
  .hero-copy {
    padding:0 7vw 8vh
  }
  .hero h1 {
    font-size:clamp(4.3rem,20vw,7rem)
  }
  .section-head {
    display:block
  }
  .video-grid,.choreo,.about,.contact {
    grid-template-columns:1fr
  }
  .video-card.wide {
    grid-column:auto;
    width:100%;
    justify-self:stretch
  }
  .video-card.wide video {
    width:100%;
  }
  .choreo {
    min-height:0
  }
  .project-photo {
    height:55vh
  }
  .project-copy {
    padding:18vw 8vw
  }
  .about {
    padding:18vw 8vw
  }
  .portrait {
    order:-1
  }
  .contact {
    padding:18vw 8vw
  }
  .intro {
    padding:24vw 8vw
  }
  .work {
    padding:18vw 6vw
  }
  .cta {
    padding:24vw 7vw
  }
  footer {
    gap:1rem;
    flex-direction:column
  }
}