/* Reversible test: the blue preview's studio and contact presentation. */
.studio,.contact {
  --accent:#ffc54e;
  --line:#28747a;
  color:#f8f7f0;
  line-height:1.4;
}
.studio .container,.contact .container {
}
.studio .eyebrow,.contact .eyebrow {
  letter-spacing:.13em;
  margin-bottom:6px;
}
.studio {
  position:relative;
  isolation:isolate;
  border-block:1px solid var(--line);
  background:#00383d;
  overflow:hidden;
  text-shadow:2px 2px black;
}
.studio::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,#002b30aa,#00353bee 45%,#00333755),url('/assets/moonlit-island.png') center 76%/cover;
  opacity:.7;
}
.studio-inner {
  grid-template-columns:1.1fr 1fr;
  gap:35px;
  padding: 30px 0 26px;
}
.studio h2 {font-size:27px;white-space:nowrap;max-width:none}
.studio-inner>p {border-left:1px solid var(--line);padding-left:35px;font-size:14px;line-height:1.4;color:inherit;max-width:none}
.studio .eyebrow {font-size:12px}
.contact {
  display:block;
  padding:0;
  position:relative;
  isolation:isolate;
  background:#00272b;
  overflow:hidden;
}
.contact::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,transparent 20%,#00272b 53%),linear-gradient(0deg,transparent 0%,#00272b35 48%,#00272b 100%),url('/assets/moonlit-island.png') left bottom/60% auto no-repeat;
}
.contact-inner {display:grid;grid-template-columns:.92fr 1.14fr;gap:26px;padding: 28px 0 26px;}
.contact-copy {border-right:1px solid #24626780;padding:3px 28px 0 0;text-shadow:2px 2px black}
.contact .contact-copy h2 {font-size:46px;margin-bottom:7px}
.contact-intro {font-size:21px;line-height:1.2;margin-bottom:9px;max-width:none}
.contact-copy>p:last-child {font-size:15px;color:#c6d6d6}
.contact .field-row {gap:16px}
.contact .field {gap:3px;margin-bottom:8px}
.contact .field label {font-size:12px;text-shadow:2px 2px black}
.contact .field input,.contact .field select,.contact .field textarea {
  color:#f5f5eb;
  background-color:#00282b7a;
  border:1px solid #368b91;
  border-radius:4px;
  padding:6px 9px;
  font-size:12px;
  outline-offset:3px;
}
.contact .field input,.contact .field select {height:31px;min-height:31px}
.contact .field select {padding-right:42px}
.contact select option {background:#00282b}
.contact .field textarea {height:75px;min-height:75px}
.contact .button {
  font-size:14px;
  min-height:39px;
  padding:8px 24px;
  margin-top:2px;
  border-radius:6px;
  color:#07191c;
  background:linear-gradient(105deg,#ffca57,#f9be45);
  box-shadow:inset 0 0 0 1px #ffda7c50,0 3px 14px #001b2420;
}
.contact .button:hover {background:#ffda7e;color:#07191c}
.contact .form-status {font-size:13px;margin-top:8px;max-width:45ch;text-shadow:2px 2px black}
.contact .form-status:not([data-state]) {color:#fff5d6}
.contact .form-status:empty {display:none}
@media(min-width:1250px) {
  .studio-inner {padding-block:34px}
  .contact-inner {padding-block:38px}
  .contact .contact-copy h2 {font-size:54px}
  .contact-intro {font-size:24px}
  .contact .field input,.contact .field select {height:38px}
  .contact .field textarea {height:100px}
}
@media(max-width:1000px) {
  .studio-inner {padding-inline:30px;gap:28px}
  .studio h2 {font-size:24px;white-space:normal}
  .studio-inner>p {padding-left:28px}
  .contact-inner {padding-inline:12px}
  .contact-intro {font-size:20px}
}
@media(max-width:720px) {
  .studio .container,.contact .container {width:calc(100% - 40px)}
  .studio-inner {grid-template-columns:1fr;gap:17px;padding:28px 5px}
  .studio h2 {font-size:clamp(23px,5.8vw,30px);white-space:normal}
  .studio-inner>p {border:0;padding:0;font-size:15px;max-width:44ch}
  .contact-inner {grid-template-columns:1fr;gap:29px;padding:32px 4px}
  .contact-copy {border:0;padding:0}
  .contact .contact-copy h2 {font-size:46px}
  .contact-intro {max-width:330px;font-size:21px}
  .contact::before {background:linear-gradient(0deg,#00272b 8%,#00272b66 60%,#00272baa),url('/assets/moonlit-island.png') left top/auto 530px no-repeat;opacity:.65}
  .contact .field input,.contact .field select {height:43px;font-size:16px}
  .contact .field textarea {height:120px;font-size:16px}
  .contact .field label {font-size:13px}
  .contact .field {margin-bottom:12px}
  .contact .button {min-height:44px}
}