/* A personal calling card, sharing the site's existing paper and sunset palette. */
.connect { position: relative; padding-block: 36px 110px; scroll-margin-top: 100px; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 7vw, 120px); align-items: center; }
.connect-copy h2 { font-size: clamp(3.5rem, 6.3vw, 7rem); line-height: .98; }
.connect-copy > p { max-width: 34ch; color: var(--muted, #b0b2a9); line-height: 1.8; margin: 28px 0 34px; }
.connect-paths { display: grid; max-width: 460px; border-top: 1px solid #ffffff22; }
.connect-paths button, .connect-paths a { display: flex; align-items: center; gap: 18px; padding: 20px 0; border: 0; border-bottom: 1px solid #ffffff22; background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.connect-paths small { color: #edb47d; font-size: 10px; letter-spacing: 1px; }
.connect-paths strong { flex: 1; font-weight: 450; }
.connect-paths .connect-arrow { font-size: 22px; color: #edb47d; transition: transform .2s; }
.connect-paths :is(button,a):hover .connect-arrow { transform: translate(3px,-3px); }
.connect-aside { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: #aeb1a5; font-size: 12px; }
.connect-aside::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #edb47d; box-shadow: 0 0 0 5px #edb47d0c; }
.connect-card { position: relative; min-width: 0; color: #344037; background: #eae4d3; border-radius: 4px; padding: clamp(24px, 3vw, 48px); box-shadow: 12px 16px 0 -3px #28342bd9, 0 30px 70px #0004; transform: rotate(1deg); }
.connect-card::before { content: ''; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; opacity: .3; background: repeating-linear-gradient(0deg, transparent, transparent 3px, #73613d0b 3px, #73613d0b 4px); }
.connect-card > * { position: relative; }
.connect-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #34403733; padding-bottom: 20px; margin-bottom: 25px; }
.connect-card-top span { font-size: 9px; letter-spacing: 1.5px; line-height: 1.7; }
.connect-stamp { display: grid; place-items: center; width: 52px; height: 58px; border: 1px solid #34403777; outline: 1px dashed #34403766; outline-offset: -5px; font: italic 30px var(--serif); transform: rotate(-7deg); }
.connect-card h3 { font: 400 clamp(30px, 3vw, 42px)/1.1 var(--serif); letter-spacing: -.5px; margin-bottom: 9px; }
.connect-card .connect-subtitle { font-size: 12px; line-height: 1.7; color: #646a5d; margin-bottom: 25px; }
.connect-card fieldset { border: 0; padding: 0; min-width: 0; margin: 0 0 24px; }
.connect-card legend, .connect-field > span { display: block; font-size: 10px; letter-spacing: .6px; margin-bottom: 9px; }
.connect-intents { display: flex; flex-wrap: wrap; gap: 7px; }
.connect-intents label { position: relative; cursor: pointer; }
.connect-intents input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.connect-intents span { display: block; padding: 13px 12px; font-size: 11px; border: 1px solid #34403733; border-radius: 25px; }
.connect-intents input:checked + span { background: #344037; border-color: #344037; color: #f2eddf; }
.connect-intents input:focus-visible + span { outline: 2px solid #81522e; outline-offset: 3px; }
.connect-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.connect-field { display: block; min-width: 0; margin-bottom: 22px; }
.connect-field small { font-size: inherit; color: #697060; letter-spacing: 0; }
.connect-card :is(input:not([type=radio]),textarea) { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #34403755; border-radius: 0; background: transparent; color: #28372e; font: 400 16px/1.6 var(--sans, 'DM Sans', sans-serif); padding: 5px 0 9px; }
.connect-card textarea { min-height: 96px; resize: vertical; }
.connect-card input::placeholder, .connect-card textarea::placeholder { color: #7e8174; opacity: 1; }
.connect-card :is(input,textarea):focus-visible { outline: 2px solid #81522e; outline-offset: 4px; }
.connect-more { margin-bottom: 24px; }
.connect-more summary { width: fit-content; cursor: pointer; font-size: 12px; padding: 4px 0; }
.connect-more .connect-fields { margin-top: 20px; }
.connect-more .connect-field { margin-bottom: 0; }
.connect-counter { display: block; text-align: right; color: #646a5d; font-size: 10px; margin-top: 5px; }
.connect-send { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid #344037; border-radius: 2px; background: #344037; color: #f6f0e3; font: 500 13px var(--sans, 'DM Sans', sans-serif); cursor: pointer; }
.connect-send:hover { background: #45523f; }
.connect-send:disabled { opacity: .65; cursor: wait; }
.connect-card :is(button,a,summary):focus-visible { outline: 2px solid #81522e; outline-offset: 4px; }
.connect-privacy { margin-top: 15px; font-size: 10px; line-height: 1.8; color: #646a5d; }
.connect-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.connect-status { font-size: 12px; line-height: 1.7; margin-top: 14px; }
.connect-status:empty { display: none; }
.connect-honey { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.connect-success { padding-block: 45px; }
.connect-success[hidden], .connect-card form[hidden] { display: none; }
.connect-success-mark { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #34403755; border-radius: 50%; margin-bottom: 30px; font-size: 24px; }
.connect-success p { margin: 20px 0 35px; font-size: 14px; line-height: 1.8; }
@media (max-width: 999px) { .connect-grid { grid-template-columns: 1fr; gap: 48px; } .connect-copy h2 { font-size: clamp(3.5rem, 10vw, 6rem); } .connect-card { transform: none; max-width: 620px; width: 100%; justify-self: center; } .connect-paths { max-width: none; } }
@media (max-width: 420px) { .connect { padding-bottom: 70px; } .connect-fields { grid-template-columns: 1fr; gap: 0; } .connect-card { padding: 24px 20px; box-shadow: 6px 9px 0 -2px #28342b; } .connect-more .connect-field + .connect-field { margin-top: 20px; } .connect .section-label { gap: 16px; } .connect .section-label span:last-child { text-align: right; } }
@media (prefers-reduced-motion: reduce) { .connect-paths .connect-arrow { transition: none; } }