/* The homepage contact form (index.html, CONTACT - the form), for pages other than the homepage.
   A copy, not a fork: keep it in step with index.html. Loads after the page's own stylesheet. */
.contact{--light:#f5f2ec;--steel-on-light:#636877;--curated-deep:#0b1321;--motion-quick:150ms;--motion-fast:250ms;--motion-out:cubic-bezier(.22,1,.36,1);
  --eg-mark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 150'><path fill='black' fill-rule='evenodd' d='M107,0 C115.836556,0 123,7.163444 123,16 L123,20.125 L123,27 L92.965116,37.170852 L92.965116,20.125 L68.348,20.124 L68.348016,45.578409 L50.05814,51.939188 L50.05814,20.125 L30.034884,20.125 L30.034884,58.834591 L0,69.166323 L0,16 C0,7.163444 7.163444,0 16,0 L107,0 Z'/><path fill='black' fill-rule='evenodd' d='M0,81.093862 L0,101.011678 C0,107.13892 2.555282,112.988575 7.050582,117.152152 L31.354227,139.662354 C38.529337,146.307991 47.948766,150 57.728679,150 C67.583879,150 77.153028,146.687293 84.898837,140.594066 L114.602056,117.228082 C119.904534,113.056897 123,106.68341 123,99.936926 L123,39.031126 L50.05814,64.166323 L50.05814,102.867806 L68.348016,96.568838 L68.348016,77.732164 L92.965116,69.166323 L92.965116,101.433593 L57.924419,122.668806 L30.034884,101.433593 L30.034884,70.738542 L0,81.093862 Z'/></svg>")}
.contact :focus-visible{outline:2px solid #0d1626;outline-offset:4px}
.stamp-ring{position:absolute;pointer-events:none;overflow:visible;z-index:2}
.contact{background:var(--light);padding:120px 56px 140px;position:relative;overflow:hidden}
.contact-inner{max-width:880px;margin:0 auto;position:relative;z-index:2}
.contact-header{margin-bottom:56px;max-width:720px}
.contact-title{font-family:var(--display);font-weight:500;font-size:clamp(42px,5vw,72px);color:var(--dark);letter-spacing:-.025em;line-height:1.02;margin-bottom:24px}
.contact-form-wrap{position:relative}
.contact-form{display:flex;flex-direction:column;gap:44px;transition:opacity .5s var(--ease-out-expo)}
.contact-form.is-sent{opacity:0;pointer-events:none}

.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:44px}

.cf-field{display:flex;flex-direction:column;position:relative}
.cf-label{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#000;margin-bottom:12px;transition:color .25s ease}
.cf-label-opt{color:rgba(15,24,41,0.5);font-weight:400;margin-left:10px;text-transform:none;letter-spacing:.02em;font-size:10px}
.cf-input{font-family:var(--sans);font-size:16px;font-weight:400;color:var(--dark);background:transparent;border:none;border-bottom:1px solid rgba(15,24,41,0.18);padding:10px 0 14px;outline:none;transition:border-color .25s var(--ease-out-expo);-webkit-appearance:none;appearance:none;border-radius:0;width:100%}
.cf-input:focus{border-bottom-color:var(--dark)}
.cf-field:focus-within .cf-label{color:var(--dark)}
.cf-textarea{resize:vertical;min-height:56px;line-height:1.6}
.cf-input::placeholder{color:rgba(15,24,41,0.32)}
.cf-input:-webkit-autofill{-webkit-text-fill-color:var(--dark);transition:background-color 9999s ease-in-out 0s;caret-color:var(--dark);box-shadow:0 0 0 1000px var(--light) inset}

.cf-error{font-family:var(--sans);font-size:12px;font-weight:400;color:#c2410c;opacity:0;margin-top:10px;letter-spacing:.005em;transition:opacity .4s ease;min-height:16px;line-height:1.3}
.cf-privacy{font-family:var(--sans);font-size:13px;font-weight:400;line-height:1.6;color:var(--steel-on-light);max-width:520px}
.cf-privacy a,.contact-error a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cf-privacy a:hover,.contact-error a:hover{color:var(--dark)}
.cf-error.is-shown{opacity:.85}
.cf-field.is-invalid .cf-input{border-bottom-color:rgba(194,65,12,0.55)}

.cf-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:16px;font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--dark);border:1px solid var(--accent);padding:22px 48px;background:transparent;cursor:pointer;position:relative;overflow:hidden;margin-top:8px;transition:color .25s var(--ease-out-quart),border-color .25s var(--ease-out-quart),letter-spacing .25s var(--ease-out-quart),opacity .15s var(--ease-out-quart),transform .16s var(--ease-out-quart)}
.cf-submit::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out-expo);z-index:0}
.cf-submit:disabled{opacity:.6;cursor:default}
.cf-submit:active:not(:disabled){transform:scale(0.98)}
.cf-submit-text,.cf-submit-arrow{position:relative;z-index:1;transition:transform .25s var(--ease-out-expo)}
.cf-submit-text{display:grid}
.cf-submit-label{grid-area:1/1;transition:opacity .15s var(--ease-out-quart),transform .15s var(--ease-out-quart),filter .15s var(--ease-out-quart),visibility 0s linear .15s}
.cf-submit-label--sending{opacity:0;visibility:hidden;transform:translateY(4px);filter:blur(2px)}
.cf-submit.is-sending .cf-submit-label--idle{opacity:0;visibility:hidden;transform:translateY(-4px);filter:blur(2px)}
.cf-submit.is-sending .cf-submit-label--sending{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .15s var(--ease-out-quart),transform .15s var(--ease-out-quart),filter .15s var(--ease-out-quart),visibility 0s}
.cf-submit:not(.is-sending) .cf-submit-label--idle{transition:opacity .15s var(--ease-out-quart),transform .15s var(--ease-out-quart),filter .15s var(--ease-out-quart),visibility 0s}

.contact-success,.contact-error{display:none;opacity:0;transition:opacity .5s var(--ease-out-expo)}
.contact-success.is-revealed,.contact-error.is-revealed{display:block}
.contact-success.is-shown,.contact-error.is-shown{opacity:1}
.contact-error{margin-top:44px}
.contact-success .contact-success-text,.contact-success .contact-success-sub,.contact-success .contact-success-back,
.contact-error .contact-success-text,.contact-error .contact-success-sub{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.contact-success.is-shown .contact-success-text,.contact-error.is-shown .contact-success-text{opacity:1;transform:none;transition-delay:0s}
.contact-success.is-shown .contact-success-sub,.contact-error.is-shown .contact-success-sub{opacity:1;transform:none;transition-delay:.12s}
.contact-success.is-shown .contact-success-back{opacity:1;transform:none;transition-delay:.24s}
.contact-success-text{font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,56px);color:var(--dark);line-height:1.2;max-width:640px;letter-spacing:-.02em}
.contact-success-sub{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:rgba(15,24,41,0.55);margin-top:20px;max-width:420px;font-style:normal}
.contact-success-back{display:inline-block;margin-top:36px;font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);text-decoration:none;border-bottom:1px solid rgba(15,24,41,0.35);padding-bottom:4px;transition:color .3s ease,border-color .3s ease,opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.contact-success-back:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cf-dot{position:absolute;left:0;top:0;background:var(--accent);pointer-events:none;z-index:3;will-change:transform;transition:box-shadow .3s ease}
.cf-dot.is-flying{box-shadow:0 0 0 1px rgba(15,24,41,.07),0 6px 18px rgba(0,242,193,.5)}
.contact-success.dot-run .cs-stop{color:transparent;transition:color .14s linear}
.contact-success.dot-run.dot-landed .cs-stop{color:inherit}
.contact-success.dot-run.is-shown .contact-success-sub{transition-delay:1.06s}   /* just after the Dot lands */
.contact-success.dot-run.is-shown .contact-success-back{transition-delay:1.18s}

@media(max-width:768px){
  .contact{padding:88px 32px 100px}
  .contact-header{margin-bottom:44px}
  .cf-row{grid-template-columns:1fr;gap:36px}
  .contact-form{gap:36px}
  .cf-submit{width:100%;justify-content:center;padding:20px 28px}
}
@media(max-width:480px){
  .contact{padding:72px 20px 80px}
  .contact-header{margin-bottom:44px}
  .cf-input{font-size:16px}
}


/* The homepage's curated layer (homepage-curated-v1.css), which is what the live form looks like */
.contact{isolation:isolate}
.contact>*{position:relative;z-index:1}
.contact::before{content:'';position:absolute;z-index:0;width:clamp(260px,38vw,620px);aspect-ratio:123/150;opacity:.026;pointer-events:none;mask:var(--eg-mark) center/contain no-repeat;-webkit-mask:var(--eg-mark) center/contain no-repeat;right:-8%;bottom:-38%;transform:rotate(6deg);background:var(--dark)}
/* The primary action is unmistakably Engage turquoise, with a small hover expansion. */
.contact{background:var(--light)}
.cf-submit{background:var(--accent);border-color:var(--accent);color:var(--curated-deep);letter-spacing:.24em;margin-top:0;transition:transform var(--motion-quick) var(--motion-out),background-color var(--motion-fast) ease,color var(--motion-fast) ease,opacity var(--motion-quick) ease}
.cf-submit::before{display:none}
.cf-submit-arrow{transition:transform var(--motion-fast) var(--motion-out),opacity var(--motion-quick) ease}

/* Contact form: outlined fields that read as fields on cream. Boundaries are a solid
   hex (3.55:1 on cream) - turquoise on cream is 1.3:1, so it only ever decorates. */
.contact{--field-line:#7b808a;--field-line-hover:#454b59;--field-error:#c2410c}
.contact-form{gap:20px}
.cf-row{gap:24px}
.cf-label{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.12em;line-height:1.3;color:var(--dark);margin-bottom:10px}
.cf-label-opt{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.01em;text-transform:none;color:var(--steel-on-light);margin-left:8px}
.cf-input{background:#fff;border:1px solid var(--field-line);border-radius:0;padding:15px 16px;min-height:54px;line-height:1.4;color:var(--dark);outline:2px solid transparent;outline-offset:-2px;transition:border-color var(--motion-fast) ease,outline-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.cf-textarea{min-height:136px;line-height:1.55;resize:vertical}
.cf-input:focus{border-color:var(--dark);outline-color:var(--dark);box-shadow:0 0 0 4px rgba(0,242,193,.45)}
.cf-field.is-invalid .cf-input{border-color:var(--field-error);outline:1px solid var(--field-error);outline-offset:-1px}
.cf-field.is-invalid .cf-input:focus{outline:2px solid var(--field-error);outline-offset:-2px;box-shadow:0 0 0 4px rgba(194,65,12,.16)}
/* Errors drop in over 250ms and lift out over 150ms (text is cleared after the fade). */
.cf-error{color:var(--field-error);font-size:13px;font-weight:500;margin-top:8px;min-height:18px;transform:translate3d(0,-4px,0);transition:opacity var(--motion-quick) ease,transform var(--motion-quick) var(--motion-out)}
.cf-error.is-shown{opacity:1;transform:none;transition-duration:var(--motion-fast)}
/* Restate the base autofill trick for the white fill and the new transitions. */
.cf-input:-webkit-autofill{-webkit-text-fill-color:var(--dark);caret-color:var(--dark);box-shadow:inset 0 0 0 1000px #fff;transition:background-color 9999s ease-in-out 0s,border-color var(--motion-fast) ease,outline-color var(--motion-fast) ease}
.cf-input:-webkit-autofill:focus{box-shadow:inset 0 0 0 1000px #fff,0 0 0 4px rgba(0,242,193,.45)}
/* Sending: fields recede and lock; the button stays solid and its arrow leaves. */
.contact-form.is-sending .cf-input{background:var(--light);border-color:rgba(15,24,41,.3);color:rgba(15,24,41,.6);cursor:progress}
.cf-submit.is-sending:disabled{opacity:1;cursor:progress}
.cf-submit.is-sending .cf-submit-arrow{transform:translate3d(10px,0,0);opacity:0}
.cf-submit:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
.contact-success-sub{color:var(--steel-on-light)}
.contact-success-back:hover{color:var(--dark);border-bottom-color:var(--dark)}
@media(max-width:768px){
  .contact-form,
  .cf-row{gap:18px}
  .cf-input{padding:14px}
  .cf-textarea{min-height:120px}
}
@media(hover:hover) and (pointer:fine){
  .cf-submit:hover:not(:disabled){background:var(--accent);color:var(--curated-deep);transform:scale(1.025)}
  .cf-submit:active:not(:disabled){transform:scale(.98)}
  .cf-submit:hover:not(:disabled) .cf-submit-arrow{transform:translateX(6px)}
  .cf-input:hover:not(:focus){border-color:var(--field-line-hover)}
  .cf-field.is-invalid .cf-input:hover:not(:focus){border-color:var(--field-error)}
}
@media(prefers-reduced-motion:reduce){
  .cf-submit,.cf-submit-arrow{transition-duration:.01ms!important;transform:none!important}
  .cf-error{transform:none!important}
}
