/* Contact controls are isolated from the animated promotion channel cards. */
#brief-form{min-width:0;display:grid;gap:32px;align-content:start}
#brief-form fieldset{margin:0;padding:0;border:0;min-width:0}
#brief-form legend{padding:0;margin-bottom:16px;font-size:16px;color:#fff;line-height:1.4}
#brief-form .chips{display:flex;flex-wrap:wrap;gap:10px}
#brief-form .chips label{position:relative;display:block;margin:0}
#brief-form .chips label>span{display:flex;align-items:center;gap:24px;padding:14px 18px;min-height:52px;border:1px solid #aa89945c;border-radius:8px;font-size:16px;line-height:1.3;color:#fff;transition:background .2s,border-color .2s}
#brief-form .chips i{font-style:normal;font-size:20px;margin-left:auto}
#brief-form .chips input:checked+span{background:#ff5a2b;color:#171717;border-color:#ff5a2b}
#brief-form .chips input:checked+span i{transform:rotate(45deg)}
#brief-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0;align-items:start}
#brief-form .field{min-width:0;display:flex;flex-direction:column;gap:10px;margin:0}
#brief-form .field>label{font-size:16px;line-height:1.4;color:#fff;margin:0}
#brief-form .field input,#brief-form textarea{width:100%;min-width:0;margin:0;border:1px solid #aa89945c;border-radius:8px;background:#ffffff03;color:#fff;font:inherit;font-size:20px;line-height:1.5;padding:18px 20px;box-sizing:border-box;outline:none;transition:border-color .2s,background .2s;transform:none}
#brief-form .field input{height:68px}
#brief-form textarea{min-height:160px;resize:vertical}
#brief-form input::placeholder,#brief-form textarea::placeholder{color:#bdaab0;font-size:inherit}
#brief-form .field input:focus,#brief-form textarea:focus{border-color:#f8b39a;background:#ffffff06;box-shadow:0 0 0 3px #f8b39a12}
#brief-form input[aria-invalid=true]{border-color:#ff8263}
#brief-form .field small{font-size:13px;line-height:1.5;color:#c4afb7;margin:0}
#brief-form .field-error{font-size:13px;line-height:1.4;color:#ff9b7c;min-height:0;margin:0}
#brief-form .field-error:empty{display:none}
#brief-form .contact-channel{display:block;opacity:1;transform:none;background:none;box-shadow:none}
#brief-form .channel-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;background:#ffffff06;border:1px solid #aa899438;border-radius:10px;max-width:460px;margin:0}
#brief-form .channel-options label{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
#brief-form .channel-options input,#brief-form .chips input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
#brief-form .channel-options span{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;padding:10px 12px;box-sizing:border-box;border:1px solid transparent;border-radius:6px;font-size:15px;line-height:1.3;color:#c4afb7;background:none;transform:none;transition:background .2s,color .2s}
#brief-form .channel-options input:checked+span{background:#fff;color:#251318;border-color:#fff}
#brief-form .channel-options label:hover span{color:#fff;background:#ffffff0a}
#brief-form .channel-options label:hover input:checked+span{color:#251318;background:#fff}
#brief-form .channel-options input:focus-visible+span,#brief-form .chips input:focus-visible+span{outline:2px solid #f8b39a;outline-offset:3px}
#brief-form .submit-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin:0}
#brief-form .submit-row .button{min-height:66px;padding:18px 24px;font-size:20px;border-radius:8px}
#brief-form .submit-row small{font-size:13px;line-height:1.5;color:#c4afb7}
#brief-form .brief-result{margin:0;min-width:0}
#brief-form .brief-result[hidden]{display:none}
#brief-form .brief-result pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){#brief-form{gap:26px}#brief-form .field-row{grid-template-columns:1fr;gap:24px}#brief-form .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}#brief-form .chips label>span{padding:12px;font-size:13px;gap:8px;min-height:52px}#brief-form .field input,#brief-form textarea{font-size:16px;padding:16px}#brief-form .field input{height:58px}#brief-form .channel-options{max-width:none}#brief-form .channel-options span{font-size:14px;padding:10px 6px}#brief-form .submit-row{gap:16px}#brief-form .submit-row .button{width:100%;font-size:18px}#brief-form textarea{min-height:140px}}
#brief-form .chips{margin:0;padding:0}
#brief-form .field.motion-enter{opacity:1;transform:none;transition:none}

/* Homepage invitation: the pitch and the form share a restrained content width. */
#contact.contact{padding-top:clamp(78px,7vw,112px);padding-bottom:clamp(86px,7vw,120px)}
#contact.contact .contact-shell{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(52px,5.7vw,96px);align-items:start;max-width:1480px;margin-inline:auto}
#contact.contact .contact-lead{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#contact.contact .contact-heading{width:100%;margin:0 0 clamp(38px,4vw,60px)}
#contact.contact .contact-heading h2{font-size:clamp(46px,4.35vw,70px);line-height:1.08;letter-spacing:-.035em}
#contact.contact .idea-project-arrow{width:1.32em;height:.74em}
#contact.contact .contact-intro{display:block;max-width:490px}
#contact.contact .contact-intro>p:first-child{font-size:clamp(18px,1.25vw,21px);line-height:1.55}
#contact.contact .contact-intro .text-link{margin:22px 0 0;font-size:16px}
#contact.contact .contact-intro .contact-reassurance{max-width:330px;margin-top:22px;font-size:13px;line-height:1.55;color:#c4afb7}
#contact.contact #brief-form{width:100%;max-width:none;gap:24px}
#contact.contact #brief-form legend{margin-bottom:12px;font-size:15px}
#contact.contact #brief-form .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#contact.contact #brief-form .chips label>span{min-height:50px;padding:12px 15px;font-size:15px;gap:12px}
#contact.contact #brief-form .field-row{gap:18px}
#contact.contact #brief-form .field{gap:8px}
#contact.contact #brief-form .field>label{font-size:15px}
#contact.contact #brief-form .field input{height:60px}
#contact.contact #brief-form .field input,#contact.contact #brief-form textarea{padding:15px 17px;font-size:17px}
#contact.contact #brief-form textarea{min-height:130px}
#contact.contact #brief-form .submit-row .button{min-height:60px;padding:16px 22px;font-size:17px}

@media(max-width:1180px){
  #contact.contact .contact-shell{display:block;max-width:760px}
  #contact.contact .contact-heading{margin-bottom:30px}
  #contact.contact .contact-heading h2{font-size:clamp(47px,5.15vw,62px)}
  #contact.contact .contact-intro{max-width:620px}
  #contact.contact #brief-form{margin-top:48px;padding-top:36px;border-top:1px solid #aa89945c}
}
@media(max-width:700px){
  #contact.contact{padding-top:68px;padding-bottom:78px}
  #contact.contact .contact-heading{margin-bottom:26px}
  #contact.contact .contact-heading h2{font-size:clamp(32px,8.5vw,48px)}
  #contact.contact .idea-project-arrow{width:1.18em}
  #contact.contact .contact-intro>p:first-child{font-size:16px}
  #contact.contact .contact-intro .text-link{margin-top:18px}
  #contact.contact .contact-intro .contact-reassurance{margin-top:18px}
  #contact.contact #brief-form{margin-top:38px;padding-top:30px;gap:22px}
  #contact.contact #brief-form .chips{gap:8px}
  #contact.contact #brief-form .chips label>span{font-size:13px;padding:11px 12px}
  #contact.contact #brief-form .field-row{grid-template-columns:1fr;gap:22px}
  #contact.contact #brief-form .field input,#contact.contact #brief-form textarea{font-size:16px}
  #contact.contact #brief-form .submit-row .button{width:100%;font-size:16px}
}

/* The homepage keeps its wine invitation, while the brief reads as a form. */
#contact.contact {
  overflow: visible;
  background: radial-gradient(ellipse at 88% 12%, #391824 0, transparent 62%),
    linear-gradient(150deg, #211019 0%, #0d0a0c 90%);
}

#contact.contact .contact-lead {
  position: sticky;
  top: var(--contact-sticky-top, var(--ws-section-offset, calc(var(--header-height, 64px) + 24px)));
  align-self: start;
}

/* A tall invitation remains readable in ordinary flow on short windows. */
#contact.contact .contact-lead.contact-lead-flow { position: static; }

@media (max-height: 600px) {
  #contact.contact .contact-lead { position: static; }
}

#contact.contact #brief-form {
  box-sizing: border-box;
  padding: clamp(28px, 3.3vw, 48px);
  border: 1px solid #d6d6d6;
  border-radius: 16px;
  background: #fff;
  color: #171717;
  box-shadow: 0 24px 64px #16070d2b;
}

#contact.contact .brief-form-heading {
  padding-bottom: 24px;
  border-bottom: 1px solid #d6d6d6;
}

#contact.contact .brief-form-heading > span {
  display: block;
  margin-bottom: 10px;
  color: #b83b20;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#contact.contact .brief-form-heading h3 {
  margin: 0;
  color: #171717;
  font-size: clamp(26px, 2.25vw, 34px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.025em;
}

#contact.contact .brief-form-heading p {
  margin: 10px 0 0;
  color: #656565;
  font-size: 15px;
  line-height: 1.5;
}

#contact.contact #brief-form legend,
#contact.contact #brief-form .field > label {
  color: #171717;
}

#contact.contact #brief-form .chips label > span {
  border-color: #d6d6d6;
  background: #f5f5f5;
  color: #171717;
}

#contact.contact #brief-form .chips label:hover > span {
  border-color: #a3a3a3;
}

#contact.contact #brief-form .chips input:checked + span,
#contact.contact #brief-form .chips label:hover input:checked + span {
  border-color: #171717;
  background: #171717;
  color: #fff;
}

#contact.contact #brief-form .chips input:checked + span i {
  color: #ff5a2b;
}

#contact.contact #brief-form .field input,
#contact.contact #brief-form textarea {
  border-color: #d6d6d6;
  background: #ffffff;
  color: #171717;
}

#contact.contact #brief-form input::placeholder,
#contact.contact #brief-form textarea::placeholder {
  color: #656565;
}

#contact.contact #brief-form .field input:focus,
#contact.contact #brief-form textarea:focus {
  border-color: #ff5a2b;
  background: #fff;
  box-shadow: 0 0 0 3px #ff5a2b1c;
}

#contact.contact #brief-form input[aria-invalid="true"] {
  border-color: #c74427;
  background: #ffffff;
}

#contact.contact #brief-form .field small {
  color: #656565;
}

#contact.contact #brief-form .field-error {
  color: #b7351b;
}

#contact.contact #brief-form .channel-options {
  max-width: none;
  border-color: #d6d6d6;
  background: #f5f5f5;
}

#contact.contact #brief-form .channel-options span {
  color: #656565;
}

#contact.contact #brief-form .channel-options label:hover span {
  background: #e7e7e7;
  color: #171717;
}

#contact.contact #brief-form .channel-options input:checked + span,
#contact.contact #brief-form .channel-options label:hover input:checked + span {
  border-color: #171717;
  background: #171717;
  color: #fff;
}

#contact.contact #brief-form .channel-options input:focus-visible + span,
#contact.contact #brief-form .chips input:focus-visible + span {
  outline-color: #ff5a2b;
}

#contact.contact #brief-form .submit-row .button.primary {
  border-color: #ff5a2b;
  background: #ff5a2b;
  color: #171717;
}

#contact.contact #brief-form .brief-result {
  border-top-color: #d6d6d6;
}

#contact.contact #brief-form .brief-result p {
  color: #656565;
}

#contact.contact #brief-form .brief-result pre {
  border: 1px solid #d6d6d6;
  background: #f5f5f5;
  color: #171717;
}

#contact.contact #brief-form .brief-actions .button.secondary {
  border-color: #171717;
  background: #171717;
  color: #fff;
}

#contact.contact #brief-form .brief-actions .text-link {
  color: #171717;
}

@media (max-width: 1180px) {
  #contact.contact .contact-lead {
    position: static;
  }

  #contact.contact #brief-form {
    margin-top: 42px;
    padding-top: clamp(28px, 3.3vw, 48px);
    border: 1px solid #d6d6d6;
  }
}

@media (max-width: 700px) {
  #contact.contact {
    background: radial-gradient(ellipse at 92% 42%, #391824 0, transparent 68%),
      linear-gradient(160deg, #211019 0%, #0d0a0c 90%);
  }

  #contact.contact #brief-form {
    margin-top: 34px;
    padding: 24px;
    border-radius: 12px;
    gap: 22px;
    box-shadow: 0 16px 42px #16070d20;
  }

  #contact.contact .brief-form-heading {
    padding-bottom: 20px;
  }

  #contact.contact .brief-form-heading h3 {
    font-size: 27px;
  }

  #contact.contact .brief-form-heading p {
    font-size: 14px;
  }

  #contact.contact #brief-form .chips {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  #contact.contact #brief-form {
    padding: 20px;
  }
}

/* Shared invitation is a full-width sibling of the footer on every route. */
#contact.contact{box-sizing:border-box;width:100%;margin:0;padding-inline:var(--gutter,clamp(20px,4vw,64px));font-family:Onest,Arial,sans-serif;color:#fff;position:relative;isolation:isolate;clip-path:none;}
#contact.contact .contact-shell{width:100%}
#contact.contact .contact-heading{display:flex;justify-content:space-between;align-items:start;gap:40px}
#contact.contact .contact-heading h2{margin:0;color:#fff;font-weight:400;max-width:none;text-transform:none}
#contact.contact .footer-line{display:block;color:#fff!important;padding-bottom:.12em;margin-bottom:-.12em;overflow:hidden}
#contact.contact .footer-line>span{display:block}
#contact.contact .contact-intro{margin:0;grid-column:auto;grid-row:auto}
#contact.contact .contact-intro p{margin:0;max-width:none}
#contact.contact .contact-intro .text-link{display:inline-flex;align-items:center;gap:10px;color:#fff}
#contact.contact .text-link svg,#contact.contact .button svg{width:24px;height:24px;flex:none}
#contact.contact #brief-form{grid-column:auto;grid-row:auto;align-self:start;position:relative;transform:none;opacity:1}
#contact.contact #brief-form .button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid transparent;font-family:inherit;cursor:pointer;line-height:1.3;font-weight:400}
#contact.contact #brief-form .brief-result{border-top:1px solid #d6d6d6;padding-top:24px}
#contact.contact #brief-form .brief-result h3{color:#171717;font-size:26px;line-height:1.25;margin:0 0 12px}
#contact.contact #brief-form .brief-result pre{padding:20px;border-radius:8px;font:inherit;font-size:15px;line-height:1.6}
#contact.contact #brief-form .brief-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
#contact.contact #brief-form .brief-actions .button{padding:14px 18px;border-radius:8px;font-size:15px}
@media(max-width:700px){#contact.contact{padding-inline:20px}#contact.contact #brief-form .brief-actions{align-items:stretch;flex-direction:column}}

/* One homepage invitation, including its accent and reveal, on every route. */
#contact.contact .footer-line:last-child{color:#e09986!important}
#contact.contact .footer-line:first-child>span{display:flex;align-items:center;gap:.38em}
#contact.contact .footer-reveal.lines-ready .footer-line>span{transform:translateY(116%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
#contact.contact .footer-reveal.lines-ready .footer-line:nth-child(2)>span{transition-delay:.18s}
#contact.contact .footer-reveal.lines-ready .footer-line:nth-child(3)>span{transition-delay:.36s}
#contact.contact .footer-reveal.lines-visible .footer-line>span{transform:translateY(0)}
#contact.contact .contact-heading.motion-enter{opacity:1;transform:none;transition:none}
#contact.contact #brief-form{position:static}
@media(max-width:760px){#contact.contact .footer-line:first-child>span{gap:.26em}}
@media(prefers-reduced-motion:reduce){#contact.contact .footer-reveal.lines-ready .footer-line>span{transform:none;transition:none}}
