.theme-1 {
  --pad:clamp(24px,5vw,90px);
  background:#080909
}
.cinema-top {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  padding:14px var(--pad);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  background:#0006;
  color:#c9c6be
}
.cinema-top>span {
  font-size:8px;
  letter-spacing:1px
}
.cinema-header {
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top:64px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:4
}
.cinema-brand {
  font-size:28px;
  font-weight:800;
  letter-spacing:4px;
  position:relative;
  padding-left:42px
}
.cinema-brand>span {
  position:absolute;
  left:0;
  top:2px;
  color:#d3392f;
  letter-spacing:-6px;
  font-size:38px
}
.cinema-brand>small {
  display:block;
  font-size:7px;
  letter-spacing:4.7px;
  color:#e3dcd0;
  margin-top:5px;
  font-weight:400
}
.cinema-header nav {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:11px
}
.cinema-header nav>a {
  padding:12px 0
}
.cinema-header nav>a:last-child {
  border:1px solid #fff5;
  padding:13px 22px
}
.cinema-hero {
  position:relative;
  min-height:900px;
  min-height:max(800px,100svh);
  isolation:isolate;
  display:flex;
  align-items:center
}
.cinema-photo {
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('cinema-office.jpg') center/cover
}
.cinema-hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#03050499 0%,#03050440 45%,transparent 75%),linear-gradient(0deg,#080909,transparent 22%)
}
.cinema-copy {
  padding:200px var(--pad) 140px;
  max-width:1100px
}
.cinema-copy .eyebrow {
  font-size:8px;
  letter-spacing:2px;
  color:#d6cfc1;
  margin:0 0 35px
}
.cinema-copy h1 {
  font-size:clamp(55px,5.8vw,96px);
  font-weight:500;
  letter-spacing:-4px;
  line-height:1.01
}
.cinema-copy h1 em {
  font-style:normal;
  font-weight:300;
  color:#c7b6a0
}
.cinema-copy>p:not(.eyebrow) {
  font-size:14px;
  color:#dad3c8;
  margin:30px 0
}
.cinema-copy .button {
  background:#8f1111;
  min-width:240px
}
.cinema-copy .button:hover {
  background:#b51c1c
}
.cinema-caption {
  position:absolute;
  bottom:0;
  left:var(--pad);
  right:var(--pad);
  padding:28px 0;
  border-top:1px solid #fff3;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:8px;
  letter-spacing:1.2px;
  color:#bfb6a8
}
.cinema-essence {
  padding:110px var(--pad);
  display:grid;
  grid-template-columns:.7fr 1.7fr 1fr;
  gap:50px;
  align-items:start;
  border-bottom:1px solid #fff2
}
.cinema-essence .eyebrow {
  color:#c2816f
}
.cinema-essence h2 {
  font-size:clamp(30px,3vw,48px);
  line-height:1.15;
  letter-spacing:-1px
}
.cinema-essence>p:last-child {
  font-size:12px;
  margin:0;
  max-width:300px
}
.cinema-areas {
  padding:90px var(--pad);
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:90px
}
.cinema-areas .eyebrow {
  color:#c2816f
}
.cinema-areas h2 {
  font-size:44px;
  line-height:1.1;
  letter-spacing:-1.5px
}
.cinema-areas .fineprint {
  margin-top:25px;
  font-size:9px
}
.cinema-service-list article {
  display:flex;
  gap:27px;
  padding:25px 0;
  border-top:1px solid #fff2
}
.cinema-service-list article>span {
  color:#c2816f;
  font-size:9px;
  font-family:monospace;
  padding-top:5px
}
.cinema-service-list h3 {
  font-size:24px;
  letter-spacing:-.5px
}
.cinema-service-list p {
  font-size:12px;
  margin-bottom:0;
  max-width:350px
}
.cinema-contact {
  padding:85px var(--pad);
  border-top:1px solid #fff2;
  text-align:center;
  background:radial-gradient(ellipse at 50% 150%,#5f342d44,transparent 70%)
}
.cinema-contact .eyebrow {
  color:#c2816f
}
.cinema-contact h2 {
  font-size:clamp(34px,4vw,63px);
  line-height:1.15;
  letter-spacing:-1.5px;
  margin-bottom:35px
}
.cinema-contact .fineprint {
  font-size:9px;
  margin-top:20px
}
.cinema-footer {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:30px var(--pad);
  border-top:1px solid #fff2;
  color:#b6ad9f;
  font-size:9px
}
.cinema-footer>span {
  letter-spacing:1.5px
}
@media(max-width:1000px) {
  .cinema-essence {
  grid-template-columns:1fr 2fr;
  gap:30px
}
.cinema-essence>p:last-child {
  grid-column:2;
  max-width:450px
}
.cinema-areas {
  gap:45px
}

}
@media(max-width:700px) {
  .cinema-top {
  font-size:8px;
  padding-block:12px
}
.cinema-top>span {
  font-size:7px;
  letter-spacing:.3px
}
.cinema-header {
  top:65px;
  align-items:start;
  gap:18px
}
.cinema-brand {
  font-size:23px;
  letter-spacing:2px;
  padding-left:28px
}
.cinema-brand>span {
  font-size:29px;
  letter-spacing:-5px
}
.cinema-brand>small {
  font-size:6px;
  letter-spacing:2.7px
}
.cinema-header nav {
  gap:0;
  flex-direction:column;
  align-items:end;
  font-size:9px
}
.cinema-header nav>a {
  padding:7px 0;
  min-height:30px
}
.cinema-header nav>a:last-child {
  padding:6px 0;
  border:0;
  border-bottom:1px solid #fff5
}
.cinema-hero {
  min-height:max(780px,100svh)
}
.cinema-photo {
  background-position:60% center
}
.cinema-hero:before {
  background:linear-gradient(90deg,#000c,#0005),linear-gradient(0deg,#080909,transparent 50%)
}
.cinema-copy {
  padding-top:230px;
  padding-bottom:155px
}
.cinema-copy .eyebrow {
  font-size:7px;
  letter-spacing:1.4px;
  max-width:270px;
  margin-bottom:28px
}
.cinema-copy h1 {
  font-size:clamp(42px,11.4vw,69px);
  letter-spacing:-2px
}
.cinema-copy>p:not(.eyebrow) {
  font-size:12px;
  margin-block:25px
}
.cinema-caption {
  font-size:6px;
  letter-spacing:.6px;
  gap:15px;
  line-height:1.9;
  padding-block:25px
}
.cinema-caption>span {
  max-width:225px
}
.cinema-caption>a {
  white-space:nowrap
}
.cinema-essence {
  padding-block:55px;
  grid-template-columns:1fr;
  gap:22px
}
.cinema-essence .eyebrow {
  margin:0
}
.cinema-essence h2 {
  font-size:32px
}
.cinema-essence>p:last-child {
  grid-column:1;
  font-size:12px
}
.cinema-areas {
  padding-block:55px;
  grid-template-columns:1fr;
  gap:30px
}
.cinema-areas h2 {
  font-size:36px
}
.cinema-areas .fineprint {
  margin-top:18px
}
.cinema-service-list article {
  gap:20px
}
.cinema-service-list h3 {
  font-size:23px
}
.cinema-contact {
  padding-block:60px
}
.cinema-contact h2 {
  font-size:34px
}
.cinema-contact .fineprint {
  font-size:8px
}
.cinema-footer {
  font-size:8px;
  flex-wrap:wrap
}

}