.tea-contact { background: #fffdf8; color: #253d31; font: 16px/1.65 Arial, Helvetica, sans-serif; }
.tea-contact .contact-container { width: min(1200px, calc(100% - 64px)); margin: auto; padding: 64px 0 80px; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.tea-contact h1, .tea-contact h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #253d31; }
.tea-contact h1 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1.12; margin: 12px 0 24px; }
.tea-contact h2 { font-size: 30px; line-height: 1.25; margin: 0 0 12px; }
.tea-contact .contact-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #5b705b; }
.tea-contact .contact-lead { font-size: 18px; max-width: 34ch; }
.tea-contact .contact-shop-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 12px; padding: 12px 24px; border: 1px solid #294d38; border-radius: 3px; background: #294d38; color: #fffdf8; font-weight: 600; text-decoration: none; }
.tea-contact .contact-shop-link:hover { background: #193a27; border-color: #193a27; }
.tea-contact .contact-botanical { position: relative; width: 240px; height: 240px; margin: 40px 0 0; border-radius: 50%; background: #f2f1e8; }
.tea-contact .contact-botanical::before { content: ''; position: absolute; left: 118px; top: 28px; height: 186px; border-left: 1px solid #8b9b7f; transform: rotate(14deg); }
.tea-contact .contact-botanical span { position: absolute; width: 82px; height: 40px; border: 1px solid #8b9b7f; border-radius: 0 100% 0 100%; background: #e3e8da; }
.tea-contact .contact-botanical span:nth-child(1) { left: 48px; top: 65px; transform: rotate(12deg); }
.tea-contact .contact-botanical span:nth-child(2) { left: 116px; top: 103px; transform: rotate(-55deg); }
.tea-contact .contact-botanical span:nth-child(3) { left: 31px; top: 143px; transform: rotate(12deg); }
.tea-contact .contact-panel { background: #f2f1e8; border: 1px solid #dedfd3; border-radius: 4px; padding: 36px; min-width: 0; }
.tea-contact .contact-required, .tea-contact .contact-help, .tea-contact .contact-counter { font-size: 14px; color: #53614e; }
.tea-contact .contact-required { margin-bottom: 28px; }
.tea-contact .contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.tea-contact .input { margin-bottom: 22px; min-width: 0; }
.tea-contact label { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.tea-contact input, .tea-contact select, .tea-contact textarea { width: 100%; max-width: 100%; margin: 0; background-color: #fffdf8; color: #253d31; border: 1px solid #aebba5; border-radius: 3px; padding: 12px; font: inherit; box-shadow: none; }
.tea-contact input, .tea-contact select { height: 49px; }
.tea-contact select { padding-right: 30px; }
.tea-contact textarea { min-height: 180px; resize: vertical; }
.tea-contact .contact-phone .input { margin-bottom: 6px; }
.tea-contact .contact-phone .contact-help { margin: 0 0 22px; line-height: 1.5; }
.tea-contact .contact-counter { text-align: right; margin: -12px 0 22px; }
.tea-contact .contact-captcha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; margin: 0 0 20px; padding: 20px 0; border-top: 1px solid #d4d9cc; border-bottom: 1px solid #d4d9cc; }
.tea-contact .contact-captcha-label { margin: 0; font-size: 15px; font-weight: 600; color: #53614e; }
.tea-contact .contact-captcha .contact-form-error { grid-column: 1 / -1; margin: 0; }
.tea-contact .contact-submit { display: block; width: 100%; min-height: 52px; height: auto; padding: 14px 20px; background: #294d38; border: 1px solid #294d38; border-radius: 3px; color: #fffdf8; font: 600 16px/1.4 Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; margin: 0; }
.tea-contact .contact-submit:hover:not(:disabled) { background: #193a27; }
.tea-contact .contact-submit:disabled { background: #e0e3d9; color: #53614e; border-color: #b9c1b4; cursor: wait; opacity: 1; }
.tea-contact .contact-submit-status { margin: 8px 0 0; }
.tea-contact .contact-form-error, .tea-contact .error-message { color: #793b2e; font-size: 15px; margin: 8px 0; }
.tea-contact .form-error { border-color: #a45e49; }
.tea-contact [hidden] { display: none; }
.tea-contact a:focus-visible, .tea-contact button:focus-visible, .tea-contact input:focus-visible, .tea-contact select:focus-visible, .tea-contact textarea:focus-visible { outline: 3px solid #996d2c; outline-offset: 3px; }
@media (max-width: 900px) { .tea-contact .contact-container { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; } .tea-contact .contact-lead { max-width: 60ch; } .tea-contact .contact-botanical { display: none; } }
@media (max-width: 560px) { .tea-contact .contact-container { width: calc(100% - 32px); padding-bottom: 48px; } .tea-contact .contact-panel { padding: 24px 16px; } .tea-contact .contact-fields { grid-template-columns: 1fr; } .tea-contact .contact-captcha { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding: 16px 0; } }