/* Contact's full-width handover. Other studio heroes keep their shared layout. */
.contact-page .contact-passage {
  position: relative;
  background: var(--hero-blue);
}
.contact-page .contact-passage .studio-hero--contact {
  display: block;
  min-height: max(820px, 100svh);
  padding: calc(var(--site-header-height, 104px) + 62px) 6% 0;
  background: var(--hero-blue);
}
.contact-page .contact-passage .studio-hero-copy {
  width: 51%;
  max-width: 810px;
  padding: 0 0 300px;
  z-index: 3;
}
.contact-page .contact-passage .studio-hero-deck {
  max-width: 28ch;
  margin-top: 28px;
  margin-bottom: 26px;
}
.contact-page .contact-passage .studio-hero-kicker { margin-bottom: 24px; }
.contact-scene {
  position: absolute;
  width: max(100%, 1200px);
  aspect-ratio: 3 / 2;
  left: 50%;
  bottom: clamp(-275px, -17vw, -210px);
  transform: translateX(-50%);
  margin: 0;
  pointer-events: none;
  isolation: isolate;
}
.contact-scene::before {
  content: "";
  position: absolute;
  inset: 20% 4% 0 35%;
  background: radial-gradient(ellipse at center, #698bf629, #163aa700 68%);
}
.contact-scene-layer {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0) rotate(var(--layer-angle, 0deg));
  transform-origin: 50% 50%;
}
.contact-scene-receive { width: 85%; left: -3%; top: 8%; z-index: 1; }
.contact-scene-send { width: 82%; left: 22%; top: -6%; z-index: 2; }
.contact-scene-letter {
  width: 100%; left: 0; top: 0; z-index: 3;
  transform-origin: 0 0;
}
.contact-scene-grip-send {
  z-index: 4;
  clip-path: polygon(44.271% 46.875%, 50.781% 39.062%, 61.849% 28.320%, 87.891% 26.367%, 91.146% 47.852%, 71.615% 49.805%, 63.802% 48.828%, 59.570% 45.898%, 56.315% 47.949%, 53.581% 49.902%, 50.781% 51.367%, 48.828% 52.246%, 47.331% 52.441%, 46.159% 51.758%, 45.443% 50.684%, 45.117% 49.219%, 45.443% 47.656%);
}
.contact-scene-grip-receive {
  z-index: 5;
  clip-path: polygon(40.365% 78.613%, 41.016% 73.633%, 42.253% 72.070%, 44.466% 70.996%, 46.549% 70.410%, 48.177% 69.336%, 49.479% 67.188%, 50.326% 64.551%, 50.977% 60.938%, 51.432% 58.789%, 52.083% 57.129%, 52.930% 56.348%, 54.102% 56.152%, 54.948% 56.738%, 55.273% 57.617%, 54.883% 59.668%, 54.622% 62.012%, 55.078% 61.816%, 55.924% 58.594%, 57.617% 55.664%, 59.245% 54.688%, 60.807% 55.273%, 61.328% 56.641%, 60.612% 59.180%, 59.896% 61.816%, 61.914% 58.984%, 63.477% 57.617%, 65.104% 58.984%, 65.234% 60.547%, 63.477% 63.379%, 62.500% 66.406%, 60.091% 71.094%, 56.315% 75.000%, 51.823% 77.637%, 45.573% 79.102%);
}
.contact-scene-shadows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.contact-passage:not(.has-contact-art) .contact-scene-layer,
.contact-passage:not(.has-contact-art) .contact-scene-shadows {
  visibility: hidden;
}
.contact-passage:not(.has-contact-art) .contact-scene-fallback {
  display: block;
}
.contact-scene-fallback { display: none; width: 100%; height: auto; }
.contact-passage.has-scene-fallback .contact-scene-layer { display: none; }
.contact-passage.has-scene-fallback .contact-scene-shadows { display: none; }
.contact-passage.has-scene-fallback .contact-scene-fallback { display: block; }
.contact-page.inner-hero-page .studio-contact {
  position: relative;
  isolation: isolate;
  align-items: start;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(40px, 7vw, 120px);
  padding: 110px max(6%, calc((100vw - 1680px) / 2)) 120px;
  border-top: 1px solid #ffffffc2;
  scroll-margin-top: 0;
}
.contact-page .studio-contact-intro { position: sticky; top: calc(var(--site-header-height, 100px) + 44px); }
.contact-page .studio-contact-intro > p:not(.studio-kicker):not(.studio-contact-deck) {
  max-width: 30ch;
  font-size: 20px;
  line-height: 1.7;
}
.contact-page .studio-contact-intro .studio-text-link { margin-top: 32px; }
.contact-page .studio-enquiry {
  position: relative;
  isolation: isolate;
  padding: clamp(32px, 4.5vw, 70px);
  background: #ffffffed;
  border: 1px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 24px 65px -35px #172d5b36;
}
.contact-page .studio-enquiry::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  border: 1px solid #dfe4ec;
  transform: translate(9px, 9px) rotate(1deg);
}
.contact-page .studio-enquiry::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #e8edf5 0%, #f2f5f9 48%, #ffffff 50%);
  border-radius: 0 7px 0 4px;
  box-shadow: -2px 3px 5px #162d5910;
  pointer-events: none;
}
.contact-page .studio-enquiry h2 { margin-bottom: 14px; }
.contact-page .contact-availability { font-size: 16px; margin-bottom: 42px; }
.contact-page .studio-enquiry #contact-form label { font-size: 16px; margin-bottom: 30px; }
.contact-page .studio-enquiry #contact-form :is(input, select, textarea) {
  border-bottom-color: #8897ad;
  padding: 13px 0;
}
.contact-page .studio-enquiry #contact-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--studio-blue);
  outline-offset: 5px;
  border-bottom-color: var(--studio-blue);
}
.contact-page .studio-enquiry #contact-form textarea { min-height: 160px; }
.contact-page .studio-enquiry #contact-form [aria-invalid="true"] { border-bottom-color: #98292f; }
.contact-page .studio-enquiry .studio-button { min-width: 190px; }
.contact-page .enquiry-status { margin-top: 24px; }
@media (min-width: 801px) and (min-height: 740px) and (prefers-reduced-motion: no-preference) {
  .contact-passage.has-contact-motion { height: calc(100svh + 380px); }
  .contact-page .contact-passage.has-contact-motion .studio-hero--contact {
    position: sticky; top: 0; height: 100svh; min-height: 0;
  }
  .has-contact-motion .contact-scene-layer { will-change: transform; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .contact-page .contact-passage .studio-hero-copy { width: 55%; }
  .contact-page .contact-passage .studio-hero--contact {
    padding-top: calc(var(--site-header-height, 104px) + 58px);
  }
  .contact-page.inner-hero-page .studio-contact { grid-template-columns: .8fr 1.2fr; gap: 36px; }
  .contact-page .enquiry-pair { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 800px) {
  .contact-page .contact-passage .studio-hero--contact {
    min-height: 0;
    padding: calc(var(--site-header-height, 84px) + 38px) 6% 0;
  }
  .contact-page .contact-passage .studio-hero-copy { width: 100%; padding: 0; max-width: 600px; }
  .contact-page .contact-passage .studio-hero-deck { max-width: 29ch; margin: 24px 0; }
  .contact-page .contact-passage .studio-hero-kicker { margin-bottom: 20px; }
  .contact-scene {
    position: relative;
    left: 50%;
    bottom: auto;
    width: 175%;
    margin: -10px 0 -21%;
  }
  .contact-scene-receive { width: 87%; left: -8%; top: 9%; }
  .contact-scene-send { width: 80%; left: 23%; top: -2%; }
  .contact-scene-letter { width: 100%; left: 0; top: 0; }
  .contact-page.inner-hero-page .studio-contact { grid-template-columns: 1fr; padding: 66px 6% 80px; gap: 38px; }
  .contact-page .studio-contact-intro { position: static; }
  .contact-page .studio-contact-intro > p:not(.studio-kicker):not(.studio-contact-deck) { max-width: 38ch; font-size: 19px; }
  .contact-page .studio-contact-intro .studio-text-link { margin-top: 22px; }
  .contact-page .studio-enquiry { padding: 36px 26px; }
  .contact-page .studio-enquiry::before { transform: translate(5px, 7px) rotate(.7deg); }
  .contact-page .contact-availability { margin-bottom: 30px; }
  .contact-page .enquiry-pair { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 801px) and (max-height: 739px) {
  .contact-page .contact-passage .studio-hero--contact { min-height: 820px; }
}
@media (max-width: 800px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .contact-passage.has-contact-motion { height: calc(var(--contact-stage-height) + 180px); }
  .contact-page .contact-passage.has-contact-motion .studio-hero--contact {
    position: sticky; top: 0; height: var(--contact-stage-height);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-scene-layer { will-change: auto; }
}
@media (forced-colors: active) {
  .contact-scene, .contact-page .studio-enquiry::before, .contact-page .studio-enquiry::after { display: none; }
  .contact-page .contact-passage .studio-hero-copy { padding-bottom: 50px; }
  .contact-page .contact-passage .studio-hero--contact { background: Canvas; color: CanvasText; min-height: 0; }
  .contact-page .studio-enquiry { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
}