/* TinaRealty lead form: /contact/ and /valuation/ only. Loads after every other site stylesheet and defines the whole form look,
   because complete.css, php-integrations.css and accessibility.css each style it a little differently.
   Tokens from DESIGN.md: ink #232d2c, muted #5d635f, line #d8d0c2, input-paper #fffcf6, field border #b7ab99,
   brass action #805b32, deep green #203b34 (focus, hover), error #9b412f. Square fields, flat, no shadows. */

.tr-form-wrap{padding-block:clamp(44px,6vw,72px) clamp(60px,8vw,100px);grid-template-columns:minmax(250px,.74fr) minmax(0,1.26fr);gap:clamp(30px,5vw,80px);align-items:start}

/* intro column */
.tr-form-wrap .tr-form-intro h2{font:400 clamp(30px,3.1vw,38px)/1.15 'GFS Didot',Georgia,serif;margin:10px 0 16px;text-wrap:balance}
.tr-form-wrap .tr-form-intro p{max-width:36ch;line-height:1.7}
.tr-form-wrap .tr-form-intro .tr-form-call{display:grid;gap:6px;margin-top:26px;padding-top:20px;border-top:1px solid #d8d0c2;font:400 15px/1.5 Cabin,sans-serif;color:#5d635f}
.tr-form-wrap .tr-form-call a{display:inline-flex;align-items:center;gap:10px;width:fit-content;font:400 clamp(20px,2vw,23px)/1.3 'GFS Didot',Georgia,serif;color:#203b34;text-decoration:none;border-bottom:1px solid #a48555;padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.tr-form-wrap .tr-form-call a:hover{color:#805b32;border-color:#805b32}
.tr-form-wrap .tr-form-call a:focus-visible{outline:2px solid #203b34;outline-offset:4px}
.tr-form-wrap .tr-form-call svg{width:18px;height:18px;flex:none}

/* card: flat, one hairline, paper ground */
.tr-form-wrap .tr-lead-form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0;padding:clamp(22px,3vw,36px);background:#faf8f4;border:1px solid #d8d0c2;border-radius:0;box-shadow:none}
.tr-form-wrap .tr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* label line: text, required mark beside it, "Optional" pushed right, all on one row */
.tr-form-wrap .tr-field{display:grid;gap:7px;min-width:0;font:600 13px/1.3 Cabin,sans-serif;letter-spacing:.01em;color:#2b3834}
.tr-form-wrap .tr-lead-form .tr-label{display:flex;align-items:baseline;gap:5px;color:#2b3834}
.tr-form-wrap .tr-lead-form .tr-label .tr-req{color:#805b32;font-weight:700}
.tr-form-wrap .tr-lead-form .tr-label .optional{margin:0 0 0 auto;font-size:12px;font-weight:400;color:#596057}

/* fields: one background, one border, one height for input, select and textarea */
.tr-form-wrap .tr-lead-form input:not([type=checkbox]),
.tr-form-wrap .tr-lead-form textarea,
.tr-form-wrap .tr-lead-form select{width:100%;min-width:0;min-height:48px;padding:12px 14px;background:#fffcf6;border:1px solid #b7ab99;border-radius:0;color:#232d2c;font:400 16px/1.4 Cabin,sans-serif;caret-color:#203b34;transition:border-color .2s ease,background-color .2s ease}
.tr-form-wrap .tr-lead-form textarea{min-height:116px;resize:vertical}
.tr-form-wrap .tr-lead-form input:not([type=checkbox]):hover,
.tr-form-wrap .tr-lead-form textarea:hover,
.tr-form-wrap .tr-lead-form select:hover{border-color:#8a7d68}
.tr-form-wrap .tr-lead-form input:not([type=checkbox]):focus,
.tr-form-wrap .tr-lead-form textarea:focus,
.tr-form-wrap .tr-lead-form select:focus{outline:2px solid #203b34;outline-offset:2px;border-color:#203b34;background:#fff}
.tr-form-wrap .tr-lead-form input:not([type=checkbox]):user-invalid,
.tr-form-wrap .tr-lead-form textarea:user-invalid,
.tr-form-wrap .tr-lead-form select:user-invalid{border-color:#9b412f}
.tr-form-wrap .tr-lead-form select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23203b34' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
/* browser surfaces themed from the palette: autofill, text selection */
.tr-form-wrap .tr-lead-form input:-webkit-autofill,
.tr-form-wrap .tr-lead-form textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fffcf6 inset;-webkit-text-fill-color:#232d2c;caret-color:#232d2c}
.tr-form-wrap .tr-lead-form ::selection{background:#e6d6b9;color:#232d2c}

/* consent: wording unchanged, drawn checkbox */
.tr-form-wrap .tr-lead-form .tr-consent{display:flex;align-items:flex-start;gap:12px;font:400 13px/1.55 Cabin,sans-serif;letter-spacing:0;color:#4a5550;cursor:pointer}
.tr-form-wrap .tr-lead-form .tr-consent span{color:#4a5550;text-wrap:pretty}
.tr-form-wrap .tr-lead-form .tr-consent a{color:#203b34;text-decoration:underline;text-underline-offset:3px}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;display:grid;place-content:center;background:#fffcf6;border:1px solid #8a7d68;border-radius:0;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]:hover{border-color:#203b34}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]:checked{background:#203b34;border-color:#203b34}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]:focus-visible{outline:2px solid #203b34;outline-offset:2px}
.tr-form-wrap .tr-lead-form .tr-consent input[type=checkbox]:user-invalid{border-color:#9b412f}

/* verification widget (fixed 300x65): light theme, and scaled down on small phones so it stays inside the card */
.tr-form-wrap .cf-turnstile{min-height:65px;min-width:0;max-width:100%}
@media(max-width:400px){.tr-form-wrap .cf-turnstile{transform:scale(.94);transform-origin:0 0;margin-bottom:-4px}}
@media(max-width:370px){.tr-form-wrap .cf-turnstile{transform:scale(.86);margin-bottom:-9px}}
@media(max-width:340px){.tr-form-wrap .cf-turnstile{transform:scale(.74);margin-bottom:-17px}}
@media(max-width:310px){.tr-form-wrap .cf-turnstile{transform:scale(.64);margin-bottom:-23px}}

/* action row: brass primary like the hero actions, deep green on hover */
.tr-form-wrap .tr-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:2px}
.tr-form-wrap .tr-form-actions .form-small{margin:0;font:400 12px/1.5 Cabin,sans-serif;color:#5d635f}
.tr-form-wrap .tr-lead-form .tr-form-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 28px;background:#805b32;color:#fff;border:1px solid #805b32;border-radius:0;font:700 12px/1 Cabin,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.tr-form-wrap .tr-lead-form .tr-form-button svg{width:18px;height:18px;flex:none;transition:transform .2s ease}
.tr-form-wrap .tr-lead-form .tr-form-button:hover{background:#203b34;border-color:#203b34}
.tr-form-wrap .tr-lead-form .tr-form-button:hover svg{transform:translateX(3px)}
.tr-form-wrap .tr-lead-form .tr-form-button:focus-visible{outline:2px solid #203b34;outline-offset:3px}
.tr-form-wrap .tr-lead-form .tr-form-button:disabled{background:#7c7466;border-color:#7c7466;cursor:wait;opacity:1}
.tr-form-wrap .tr-lead-form .tr-form-button:disabled svg{transform:none}
.tr-form-wrap .tr-lead-form .form-preview{margin:0;font:400 12px/1.55 Cabin,sans-serif;color:#5d635f}

/* status message: full hairline box, no coloured side bar */
.tr-form-wrap .tr-lead-form .form-message{margin:0;padding:14px 16px;background:#f1ebe0;border:1px solid #c9b99f;border-left-width:1px;font:500 14px/1.55 Cabin,sans-serif;color:#2b3834}
.tr-form-wrap .tr-lead-form .form-message.error{background:#f8ebe7;border-color:#c9877a;color:#6b2a1d}
.tr-form-wrap .tr-lead-form .form-message.success{background:#e8efe9;border-color:#9fb8a8;color:#1f3b30}

@media(max-width:780px){
  .tr-form-wrap{grid-template-columns:1fr;gap:26px}
  .tr-form-wrap .tr-form-intro .tr-form-call{margin-top:20px}
}
@media(max-width:550px){
  .tr-form-wrap .tr-form-grid{grid-template-columns:1fr}
  .tr-form-wrap .tr-lead-form{padding:20px 18px;gap:16px}
  .tr-form-wrap .tr-form-actions{display:grid}
  .tr-form-wrap .tr-lead-form .tr-form-button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tr-form-wrap *,.tr-form-wrap *::after{transition:none!important}
}