.contact-top{
  position:absolute;inset:0 0 auto;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding-inline:var(--gutter);
}
.contact-logo{
  display:flex;align-items:baseline;gap:.42em;
  font-family:var(--serif);font-size:1.35em;letter-spacing:-.012em;
  line-height:1;color:var(--cloud);
  transition:opacity .3s var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .contact-logo:hover{opacity:.72}
}
.contact-logo:focus-visible{outline:2px solid var(--neon);outline-offset:6px;border-radius:4px}
.contact-top .nav-lang{position:absolute;right:var(--gutter)}
.contact-top .nav-lang a{color:rgba(239,243,241,.72)}
.contact-top .nav-lang a.is-on{color:var(--canvas)}

.contact-page{
  min-height:100svh;background:var(--ink);
  padding-top:var(--nav-h);
  border-bottom:1px solid rgba(239,243,241,.12);
}

.contact-board{
  min-height:calc(100svh - var(--nav-h));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.contact-side{
  padding:var(--s-9) clamp(40px,4.5vw,80px) var(--s-9) var(--gutter);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.contact-form-side{
  padding:var(--s-9) var(--gutter) var(--s-9) clamp(40px,4.5vw,80px);
  border-left:1px solid rgba(239,243,241,.12);
  display:flex;flex-direction:column;justify-content:flex-start;
}


.contact-page.is-done .contact-board{grid-template-columns:minmax(0,1fr);place-items:center}
.contact-page.is-done .contact-side{display:none}
.contact-page.is-done .contact-form-side{border-left:0;text-align:center;max-width:34rem}

.contact-kicker{
  font-family:var(--mono);font-size:.6875em;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fog);margin:0 0 var(--s-5);
}
.contact-title{
  font-family:var(--serif);font-weight:400;font-size:4.1em;line-height:1.04;
  letter-spacing:-.022em;color:var(--cloud);margin:0;
}
.contact-title em{font-style:italic;color:var(--sage)}
.contact-lead{
  font-family:var(--sans);font-weight:400;font-size:1.0625em;line-height:1.6;
  letter-spacing:0;color:var(--ash);margin:var(--s-6) 0 0;max-width:40ch;
}

.field-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-6) var(--s-7);border:0;padding:0;margin:0;
}
.field-grid legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.field{display:flex;flex-direction:column;min-width:0}
.field.is-wide{grid-column:1 / -1}

.field label{
  font-family:var(--sans);font-size:.8125em;font-weight:400;letter-spacing:0;
  color:var(--ash);margin-bottom:var(--s-3);white-space:nowrap;
}
.field label .opt{color:var(--fog);margin-left:var(--s-2)}

.field input,
.field textarea{
  width:100%;background:rgba(12,32,30,.42);color:var(--cloud);
  font-family:var(--sans);font-size:1em;font-weight:400;
  letter-spacing:0;line-height:1.5;
  border:1px solid rgba(239,243,241,.14);border-radius:5px;
  padding:var(--s-3) var(--s-4);
  transition:border-color .25s var(--spring),background .25s var(--spring);
}
.field textarea{resize:none;overflow:hidden;min-height:5.6em;line-height:1.6}
.field input::placeholder,
.field textarea::placeholder{color:var(--fog)}
.field input:focus,
.field textarea:focus{
  outline:0;border-color:var(--neon);background:rgba(12,32,30,.6);
}

.field-error{
  font-family:var(--sans);font-size:.8125em;letter-spacing:0;line-height:1.4;
  color:var(--alert);margin:var(--s-3) 0 0;
}
.field-error:empty{display:none}
.field.has-error input,
.field.has-error textarea{border-color:var(--alert)}

.consent{
  grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-4);align-items:start;
}
.consent .field-error{grid-column:1 / -1;margin:0}
.consent input{
  appearance:none;width:1.05em;height:1.05em;flex:0 0 auto;margin-top:.2em;
  border:1px solid rgba(239,243,241,.28);border-radius:.2em;
  background:transparent;cursor:pointer;
  transition:background .25s var(--spring),border-color .25s var(--spring);
}
.consent input:checked{background:var(--neon);border-color:var(--neon)}
.consent input:checked::after{
  content:"";display:block;width:100%;height:100%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%230C201E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat;
}
.consent input:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.consent-text{
  font-family:var(--sans);font-size:.875em;letter-spacing:0;line-height:1.55;
  color:var(--ash);max-width:56ch;
}
.consent-text a{color:var(--cloud);border-bottom:1px solid rgba(230,255,43,.4)}
@media (hover:hover) and (pointer:fine){
  .consent-text a:hover{color:var(--neon);border-color:var(--neon)}
}
.consent.has-error input{border-color:var(--alert)}

.contact-actions{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s-5)}
.contact-submit{
  display:inline-flex;align-items:center;gap:var(--s-3);
  background:var(--neon);color:var(--canvas);border:0;cursor:pointer;
  font-family:var(--display);font-size:1.25em;font-weight:500;
  letter-spacing:-.02em;line-height:.85;
  padding:var(--s-4) var(--s-6);border-radius:999px;
  transition:background .3s var(--spring),transform .3s var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .contact-submit:hover{background:var(--neon-hover);transform:translateY(-2px)}
}
.contact-submit .dot{
  width:1.1em;height:1.1em;border-radius:50%;background:rgba(12,32,30,.14);
  display:grid;place-items:center;flex:0 0 auto;
}
.contact-submit .dot svg{width:.52em;height:.52em;fill:none;stroke:var(--canvas);stroke-width:2.4}
.contact-submit:focus-visible{outline:2px solid var(--cloud);outline-offset:4px}
.contact-submit[disabled]{opacity:.5;cursor:progress;transform:none}


.form-note{
  grid-column:1 / -1;
  font-family:var(--sans);font-size:.9375em;letter-spacing:0;line-height:1.55;
  color:var(--cloud);margin:0;
}

.contact-direct{
  width:100%;max-width:720px;margin:var(--s-9) 0 0;
  padding-top:var(--s-6);border-top:1px solid rgba(239,243,241,.1);
  display:flex;align-items:baseline;gap:var(--s-5);flex-wrap:wrap;
}
.contact-direct dt{
  font-family:var(--mono);font-size:.625em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fog);margin:0;
}
.contact-direct dd{margin:0}
.contact-direct a{
  font-family:var(--sans);font-size:1.0625em;letter-spacing:0;color:var(--ash);
  transition:color .3s var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .contact-direct a:hover{color:var(--neon)}
}

.contact-done{width:100%;max-width:720px;text-align:center;margin-top:var(--s-10);
  transition:opacity .25s var(--spring)}
.done-mark{
  display:grid;place-items:center;width:80px;height:80px;
  margin:0 auto var(--s-6);border-radius:50%;background:rgba(230,255,43,.08);
}
.done-mark svg{
  width:44px;height:44px;fill:none;stroke:var(--neon);
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.done-mark circle{stroke-dasharray:189;stroke-dashoffset:189}
.done-mark path{stroke-dasharray:37;stroke-dashoffset:37}
.contact-done h2{
  font-family:var(--serif);font-weight:400;font-size:2.6em;line-height:1.08;
  letter-spacing:-.02em;color:var(--cloud);margin:0;
}
.contact-done p{
  font-family:var(--sans);font-size:1.0625em;letter-spacing:0;line-height:1.6;
  color:var(--ash);margin:var(--s-5) auto var(--s-8);max-width:46ch;
}
.contact-done button{
  background:transparent;border:1px solid rgba(230,255,43,.5);cursor:pointer;
  font-family:var(--mono);font-size:.6875em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--neon);
  padding:var(--s-4) var(--s-6);border-radius:999px;
  transition:border-color .3s var(--spring),color .3s var(--spring),
    background .3s var(--spring);
}
@media (hover:hover) and (pointer:fine){
  .contact-done button:hover{background:var(--neon);border-color:var(--neon);color:var(--canvas)}
}
.contact-done button:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .contact-submit,.contact-submit:hover,.contact-done button,
  .field input,.field textarea,.consent input{transition:none;transform:none}
}

.build-meter{
  grid-column:1 / -1;display:flex;align-items:center;gap:var(--s-4);
}
.build-track{
  position:relative;flex:1;height:2px;overflow:hidden;
  background:rgba(239,243,241,.1);
}
.build-fill{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--sage);
  transition:width .5s var(--spring),background .4s var(--spring);
}
.build-meter.is-ready .build-fill{background:var(--neon)}
.build-label{
  font-family:var(--mono);font-size:.5625em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fog);white-space:nowrap;
  transition:color .4s var(--spring);
}
.build-meter.is-ready .build-label{color:var(--neon)}

.field.is-filled input,
.field.is-filled textarea{border-color:rgba(184,201,196,.32)}
.field.is-filled input:focus,
.field.is-filled textarea:focus{border-color:var(--neon)}

@media (prefers-reduced-motion:reduce){
  .build-fill,.build-label{transition:none}
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--cloud);
  -webkit-box-shadow:0 0 0 100px #0F2724 inset;
  caret-color:var(--cloud);
  transition:background-color 9999s ease-out 0s;
}

@media (max-width:959px){
  .contact-board{grid-template-columns:minmax(0,1fr);min-height:0}
  .contact-side{padding:var(--s-8) var(--gutter) var(--s-7);display:contents}
  .contact-form-side{
    padding:var(--s-7) var(--gutter) var(--s-9);
    border-left:0;border-top:1px solid rgba(239,243,241,.12);
    order:4;
  }
  .contact-title{font-size:2.6em;order:2}
}

@media (max-width:639px){
  .field-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .contact-title{font-size:2.3em}
  .contact-done h2{font-size:2.1em}
}

#contact-form{transition:opacity .3s var(--spring),transform .3s var(--spring)}
#contact-form.is-leaving{opacity:0;transform:translateY(-12px);pointer-events:none}
#contact-form.is-entering{opacity:0;transform:translateY(12px)}
.contact-done.is-leaving{opacity:0}

.contact-done .done-mark{
  opacity:0;transform:scale(.6);
  animation:done-pop .55s cubic-bezier(.34,1.56,.64,1) .05s both;
}
.contact-done .done-mark circle{animation:done-draw .7s var(--e-out) .2s both}
.contact-done .done-mark path{animation:done-draw .4s var(--e-out) .8s both}
.contact-done h2,
.contact-done p,
.contact-done button{opacity:0;animation:done-in .55s var(--spring) both}
.contact-done h2{animation-delay:.3s}
.contact-done p{animation-delay:.45s}
.contact-done button{animation-delay:.85s}
@keyframes done-pop{to{opacity:1;transform:scale(1)}}
@keyframes done-draw{to{stroke-dashoffset:0}}
@keyframes done-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.contact-done h2:focus{outline:0}

@media (prefers-reduced-motion:reduce){
  .contact-done .done-mark,.contact-done .done-mark circle,
  .contact-done .done-mark path,.contact-done h2,
  .contact-done p,.contact-done button{animation-delay:0s}
  #contact-form{transition:none}
}

@media (max-width:959px){
  .contact-kicker,.contact-title,.contact-lead,.contact-direct{padding-inline:var(--gutter)}
  .contact-kicker{order:1;padding-top:var(--s-8)}
  .contact-lead{order:3;padding-bottom:var(--s-7)}
  .contact-direct{order:5;margin:0;max-width:none;
    padding-top:var(--s-7);padding-bottom:var(--s-8);
    border-top:1px solid rgba(239,243,241,.12)}
}

@media (min-width:960px){
  body.split-left .contact-page{background:linear-gradient(90deg,var(--neon) 50%,var(--ink) 50%)}
  body.split-left .contact-kicker{color:rgba(12,32,30,.6)}
  body.split-left .contact-title{color:var(--canvas)}
  body.split-left .contact-title em{color:var(--ink)}
  body.split-left .contact-lead{color:rgba(12,32,30,.78)}
  body.split-left .contact-direct{border-top-color:rgba(12,32,30,.22)}
  body.split-left .contact-direct dt{color:rgba(12,32,30,.6)}
  body.split-left .contact-direct a{color:rgba(12,32,30,.78)}
  body.split-left .contact-logo{
    background:linear-gradient(90deg,var(--ink) 50%,var(--cloud) 50%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.split-left .brand-mark{background:var(--canvas)}
  body.split-left .brand-mark img{content:url('/assets/logo/ws-monogram-neon.svg?v=d74c889d')}

  body.split-right .contact-page{background:linear-gradient(90deg,var(--ink) 50%,var(--cream) 50%)}
  body.split-right .contact-logo{
    background:linear-gradient(90deg,var(--cloud) 50%,var(--ink) 50%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  body.split-right .field label{color:var(--canvas)}
  body.split-right .field label .opt{color:rgba(12,32,30,.45)}
  body.split-right .field input,
  body.split-right .field textarea{
    background:var(--white);border-color:rgba(12,32,30,.18);color:var(--canvas)}
  body.split-right .field input::placeholder,
  body.split-right .field textarea::placeholder{color:rgba(23,72,69,.55)}
  body.split-right .field input:focus,
  body.split-right .field textarea:focus{border-color:var(--ink);background:var(--white)}
  body.split-right .field.is-filled input,
  body.split-right .field.is-filled textarea{border-color:rgba(12,32,30,.34)}
  body.split-right .field.is-filled input:focus,
  body.split-right .field.is-filled textarea:focus{border-color:var(--ink)}
  body.split-right .field-error{color:#B0421A}
  body.split-right .form-note{color:rgba(12,32,30,.75)}
  body.split-right .field input:-webkit-autofill,
  body.split-right .field input:-webkit-autofill:hover,
  body.split-right .field input:-webkit-autofill:focus,
  body.split-right .field textarea:-webkit-autofill{
    -webkit-text-fill-color:var(--canvas);
    -webkit-box-shadow:0 0 0 100px var(--white) inset;
    caret-color:var(--canvas);
  }
  body.split-right .consent input{border-color:rgba(12,32,30,.4)}
  body.split-right .consent input:checked{background:var(--ink);border-color:var(--ink)}
  body.split-right .consent input:checked::after{
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23F9F7F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat;
  }
  body.split-right .consent input:focus-visible{outline-color:var(--ink)}
  body.split-right .consent-text{color:rgba(12,32,30,.8)}
  body.split-right .consent-text a{color:var(--ink);border-bottom-color:rgba(12,32,30,.4)}
  body.split-right .contact-submit:focus-visible{outline-color:var(--canvas)}
  body.split-right .build-track{background:rgba(12,32,30,.16)}
  body.split-right .build-fill{background:rgba(23,72,69,.55)}
  body.split-right .build-meter.is-ready .build-fill{background:var(--ink)}
  body.split-right .build-label{color:rgba(12,32,30,.55)}
  body.split-right .build-meter.is-ready .build-label{color:var(--ink)}
  body.split-right .nav-lang{border-color:rgba(12,32,30,.4)}
  body.split-right .nav-lang a{color:rgba(12,32,30,.55)}
  body.split-right .nav-lang a.is-on{background:var(--ink);color:var(--cream)}

  body:has(.contact-page.is-done) .contact-logo{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;
    color:var(--cloud);
  }
  body:has(.contact-page.is-done) .brand-mark{background:var(--neon)}
}

@media (min-width:960px) and (hover:hover) and (pointer:fine){
  body.split-left .contact-direct a:hover{color:var(--ink)}
  body.split-right .consent-text a:hover{color:var(--canvas);border-color:var(--canvas)}
  body.split-right .nav-lang a:hover{color:var(--canvas)}
}

@media (min-width:960px){
  body.fields-neon .field input,
  body.fields-neon .field textarea{
    background:var(--neon);border-color:transparent;color:var(--canvas);caret-color:var(--canvas)}
  body.fields-neon .field input::placeholder,
  body.fields-neon .field textarea::placeholder{color:rgba(12,32,30,.55)}
  body.fields-neon .field input:focus,
  body.fields-neon .field textarea:focus{border-color:var(--cloud);background:var(--neon)}
  body.fields-neon .field.is-filled input,
  body.fields-neon .field.is-filled textarea{border-color:rgba(12,32,30,.4)}
  body.fields-neon .field.is-filled input:focus,
  body.fields-neon .field.is-filled textarea:focus{border-color:var(--cloud)}
  body.fields-neon .field input:-webkit-autofill,
  body.fields-neon .field input:-webkit-autofill:hover,
  body.fields-neon .field input:-webkit-autofill:focus,
  body.fields-neon .field textarea:-webkit-autofill{
    -webkit-text-fill-color:var(--canvas);
    -webkit-box-shadow:0 0 0 100px var(--neon) inset;
    caret-color:var(--canvas);
  }
  body.fields-neon .field-error{color:#FF9C7A}
  body.fields-neon .contact-submit{
    background:var(--cloud);color:var(--canvas)}
  body.fields-neon .contact-submit .dot{background:rgba(12,32,30,.14)}

  body.split-cream .contact-page{background:linear-gradient(90deg,var(--cream) 50%,var(--ink) 50%)}
  body.split-cream .contact-kicker{color:rgba(12,32,30,.6)}
  body.split-cream .contact-title{color:var(--canvas)}
  body.split-cream .contact-title em{color:var(--ink)}
  body.split-cream .contact-lead{color:rgba(12,32,30,.78)}
  body.split-cream .contact-direct{border-top-color:rgba(12,32,30,.22)}
  body.split-cream .contact-direct dt{color:rgba(12,32,30,.6)}
  body.split-cream .contact-direct a{color:rgba(12,32,30,.78)}
  body.split-cream .contact-logo{
    background:linear-gradient(90deg,var(--ink) 50%,var(--cloud) 50%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

@media (min-width:960px) and (hover:hover) and (pointer:fine){
  body.fields-neon .contact-submit:hover{background:var(--white)}
  body.split-cream .contact-direct a:hover{color:var(--ink)}
}