.contact-page { background: radial-gradient(ellipse at 5% 35%, #17466335, transparent 50%), radial-gradient(ellipse at 95% 0, #64142b26, transparent 45%), #061321; }
.contact-main { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8%; padding: 45px 7% 95px; max-width: 1640px; margin: auto; align-items: start; }
.contact-intro { padding-top: 20px; }.contact-intro h1 { font-size: clamp(64px, 6vw, 91px); margin: 30px 0; line-height: .94; letter-spacing: -.035em; }.contact-lede { color: #adc0ce; font-size: 15px; line-height: 1.85; margin-bottom: 0; }
.connection-art { position: relative; width: 100%; max-width: 415px; margin: 25px -20px 30px; height: 180px; }.connection-art svg { width: 100%; height: 100%; }.connection-path { stroke: #ff2438; stroke-width: 1; stroke-dasharray: 550; stroke-dashoffset: 550; animation: connectPath 1.8s .2s ease forwards; opacity: .7; }.path-shadow { stroke: #86b0c7; opacity: .3; animation-delay: .4s; }.connection-orbit { stroke: #789eb244; transition: stroke .5s, transform .7s; transform-origin: 232px 99px; }.inner-orbit { stroke: #ff243855; }.connection-centre { fill: #ff2438; filter: drop-shadow(0 0 16px #ff2438); }.connection-point { fill: #9dbace; transition: fill .4s, filter .4s; }.is-connected .connection-point { fill: #ff2438; filter: drop-shadow(0 0 9px #ff2438); }.is-connected .connection-orbit { stroke: #ff243877; transform: scale(1.08); }.connection-label { position: absolute; font-size: 8px; color: #8aaabd; top: 73%; }.label-you { left: 2%; }.label-us { right: 0; }
.contact-direct { display: flex; flex-direction: column; gap: 10px; }.contact-direct > span { font-size: 12px; color: #88a3b6; }.contact-direct a { font-size: 15px; color: #d8e7f0; align-self: flex-start; border-bottom: 1px solid #bdd3e23b; padding-bottom: 9px; }.contact-direct a > span { color: #ff2438; margin-left: 20px; }.contact-address { font-size: 12px; color: #7899af; line-height: 1.8; margin: 24px 0 0; }
.conversation-card { position: relative; min-width: 0; padding: 29px 36px 20px; background: linear-gradient(145deg, #173247bd, #081c2ec9); border: 1px solid #95bdd32b; border-radius: 7px; box-shadow: 0 24px 80px #0003; overflow: hidden; }
.conversation-card::before { content: ""; position: absolute; height: 1px; top: 0; left: 12%; right: 12%; background: linear-gradient(90deg, transparent, #ff243866, transparent); }.conversation-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #adc0ce; }.conversation-top > span:first-child { display: flex; align-items: center; gap: 8px; }.conversation-top i { width: 5px; height: 5px; background: #ff2438; border-radius: 50%; }.conversation-top > span:last-child { font-size: 12px; color: #7899af; }
.form-progress { display: flex; gap: 6px; margin: 23px 0 32px; }.form-progress i { height: 2px; background: #8fa8bd26; flex: 1; transition: background .4s; }.form-progress i:first-child { background: #ff2438; }[data-step="1"] .form-progress i:nth-child(2), [data-step="2"] .form-progress i, [data-step="3"] .form-progress i { background: #ff2438; }
.contact-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; min-height: 375px; animation: formArrive .4s both; }.contact-form legend { font-family: var(--display); text-transform: uppercase; font-size: 43px; font-weight: 650; line-height: .98; letter-spacing: -.025em; padding: 0; margin-bottom: 16px; }.contact-form legend:focus { outline: none; }.field-intro { color: #9ab5c7; font-size: 12px; line-height: 1.8; margin-bottom: 24px; }
.topic-grid { display: grid; gap: 9px; }.topic-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid #95bdd326; border-radius: 4px; cursor: pointer; background: #08203470; transition: border-color .2s, background .2s, transform .2s; }.topic-option:hover { background: #17394d; transform: translateX(3px); }.topic-option input { position: absolute; width: 100%; height: 100%; inset: 0; margin: 0; opacity: 0; cursor: pointer; }.topic-option:has(input:checked) { background: linear-gradient(115deg, #6b22312e, #19283d); border-color: #ff243899; }.topic-option:has(input:focus-visible) { outline: 2px solid #ff2438; outline-offset: 3px; }.topic-icon { font-size: 26px; color: #d7687a; width: 28px; text-align: center; }.topic-option b { display: block; font-size: 12px; font-weight: 500; }.topic-option small { display: block; font-size: 12px; color: #86a5bb; margin-top: 5px; }.topic-option > i { font-style: normal; margin-left: auto; color: #819fb1; }.topic-option:has(input:checked) > i { color: #ff2438; }
.field-error { min-height: 0; margin: 7px 0 0; color: #ff97a5; font-size: 12px; line-height: 1.6; }.field-error:empty { display: none; }.form-field { margin-bottom: 22px; }.form-field label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: #d1e1eb; }.form-field label span { font-size: 12px; color: #819fb1; }.form-field input, .form-field textarea { display: block; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #779db44d; border-radius: 0; outline: none; color: #edf5f9; background: transparent; font: 12px/1.8 "Avenir Next", Avenir, sans-serif; transition: border-color .2s, box-shadow .2s; }.form-field textarea { padding: 14px; border: 1px solid #779db44d; border-radius: 4px; resize: vertical; min-height: 155px; max-height: 330px; }.form-field input:focus, .form-field textarea:focus { border-color: #ff2438; box-shadow: 0 1px #ff2438; }.form-field input::placeholder, .form-field textarea::placeholder { color: #6f90a8; }.form-field [aria-invalid="true"] { border-color: #ff97a5; }.message-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 23px; border-bottom: 1px solid #779db426; padding-bottom: 15px; font-size: 12px; color: #e5c4ca; }.message-context button { background: none; font-size: 12px; color: #98b4c7; }.message-meta { display: flex; justify-content: space-between; color: #7899af; font-size: 12px; margin-top: 9px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 20px; }.form-actions .button { margin-left: auto; gap: 40px; }.form-back { background: none; color: #a5bdcd; font-size: 12px; padding: 10px 0; }.form-delivery { font-size: 12px; line-height: 1.8; color: #7899af; margin: 20px 0 0; }.conversation-bottom { border-top: 1px solid #779db426; margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12px; color: #708fa4; }.conversation-bottom > span:last-child { color: #ff2438; font-size: 19px; }
.contact-review { animation: formArrive .4s both; }.contact-review:focus { outline: none; }.review-mark { width: 43px; height: 43px; border: 1px solid #ff243866; color: #ff2438; border-radius: 50%; display: grid; place-items: center; font-size: 25px; margin-bottom: 24px; }.contact-review h2 { font-size: 43px; margin-bottom: 18px; }.contact-review > p { font-size: 12px; color: #9ab5c7; line-height: 1.8; }.contact-review dl { padding: 15px 0; border-top: 1px solid #779db42b; border-bottom: 1px solid #779db42b; margin: 22px 0; }.contact-review dl > div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; font-size: 12px; line-height: 1.8; }.contact-review dl > div + div { margin-top: 14px; }.contact-review dt { color: #7899af; }.contact-review dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }.contact-review .review-message { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; color: #d1e1eb; font-size: 12px; margin-bottom: 25px; }.review-actions { display: flex; justify-content: space-between; margin-top: 22px; }.review-actions button { font-size: 12px; background: none; color: #a5bdcd; padding: 5px 0; }.contact-review #draft-status { font-size: 12px; color: #adc0ce; margin-top: 18px; }html:not(.js) .contact-form { display: none; }
@keyframes formArrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }@keyframes connectPath { to { stroke-dashoffset: 0; } }
@media (max-width: 1050px) and (min-width: 761px) { .contact-main { padding-left: 5%; padding-right: 5%; gap: 5%; grid-template-columns: .85fr 1.15fr; }.contact-intro h1 { font-size: 65px; }.contact-intro .eyebrow { font-size: 12px; }.contact-lede { font-size: 12px; }.conversation-card { padding: 25px; }.contact-form legend, .contact-review h2 { font-size: 37px; }.topic-option { padding: 13px; gap: 10px; }.topic-option b { font-size: 12px; }.topic-option small { font-size: 12px; } }
@media (max-width: 760px) { .contact-main { grid-template-columns: 1fr; gap: 38px; padding: 24px 6% 55px; }.contact-intro { padding-top: 10px; }.contact-intro h1 { font-size: clamp(61px, 16vw, 85px); margin: 26px 0 24px; }.contact-intro .eyebrow { font-size: 12px; }.contact-lede { font-size: 13px; }.connection-art { height: 135px; max-width: 350px; margin: 15px 0 22px; }.connection-label { font-size: 7px; top: 83%; }.label-you { left: 2%; }.contact-direct > span { font-size: 12px; }.contact-direct a { font-size: 13px; }.contact-address { display: none; }.conversation-card { padding: 24px 20px 18px; scroll-margin-top: 20px; }.conversation-top { font-size: 12px; }.conversation-top > span:last-child { font-size: 12px; }.contact-form legend, .contact-review h2 { font-size: 39px; }.contact-form fieldset { min-height: 365px; }.topic-option { padding: 14px 12px; gap: 11px; }.topic-option b { font-size: 12px; }.topic-option small { font-size: 12px; }.topic-icon { width: 25px; font-size: 24px; }.form-field input, .form-field textarea { font-size: 16px; }.form-field label { font-size: 12px; }.form-actions .button { font-size: 12px; padding: 16px 18px; }.form-delivery { font-size: 12px; }.conversation-bottom { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .contact-page *, .contact-page *::before { animation: none !important; transition: none !important; }.connection-path { stroke-dashoffset: 0; } }

/* Webmail choices under "Open email draft" */
.contact-review .webmail { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: 12px; color: #9ab5c7; }.contact-review .webmail a { color: #d1e1eb; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ff243899; }.contact-review .webmail a:hover, .contact-review .webmail a:focus-visible { color: #fff; text-decoration-color: #ff2438; }