/* sa-static-contact v2.0.0: contact form styles.
   Theme per site by setting these custom properties on .sa-contact (all optional, neutral defaults):
   --sa-font --sa-panel --sa-ink --sa-text --sa-btn-bg --sa-btn-fg --sa-btn-hover --sa-accent --sa-link
   --sa-check-bg --sa-danger --sa-danger-bg --sa-warn-bg --sa-border
   --sa-rem (base size for text, default 16px; set it to 1rem to follow the root font size) */
.sa-contact{
  --_font:var(--sa-font,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  --_panel:var(--sa-panel,#f4f4f6);
  --_ink:var(--sa-ink,#222222);
  --_text:var(--sa-text,#333333);
  --_btn-bg:var(--sa-btn-bg,#222222);
  --_btn-fg:var(--sa-btn-fg,#ffffff);
  --_btn-hover:var(--sa-btn-hover,#3a3a3a);
  --_accent:var(--sa-accent,#c25400);
  --_link:var(--sa-link,var(--_accent));
  --_check-bg:var(--sa-check-bg,var(--_btn-bg));
  --_danger:var(--sa-danger,#a94442);
  --_danger-bg:var(--sa-danger-bg,#f2dede);
  --_warn-bg:var(--sa-warn-bg,#fcf8e3);
  --_border:var(--sa-border,#cccccc);
  --_r:var(--sa-rem,16px);
  box-sizing:border-box;font-family:var(--_font);color:var(--_text);font-size:16px;line-height:1.4;color-scheme:light;
  background:var(--_panel);padding:32px 30px 34px;text-align:left}
@media (max-width:600px){.sa-contact{padding:24px 18px 26px}}
.sa-contact *,.sa-contact *::before,.sa-contact *::after{box-sizing:border-box}
.sa-contact h3.sa-title{margin:0 0 4px;padding:0;font:700 calc(1.15*var(--_r))/1.3 var(--_font);text-transform:uppercase;color:var(--_text);letter-spacing:.01em}
/* the three small hint lines below use !important on size: a host theme rule like "#content p{font-size:18px}" out-ranks a class selector */
.sa-contact .sa-intro{margin:0 0 16px;padding:0;font-size:calc(.8*var(--_r))!important;line-height:1.4!important;color:#6b6b78}
.sa-contact .sa-req{color:var(--_link)}

.sa-contact .sa-form{display:flex;flex-direction:column;margin:0;padding:0;background:none;border:0}
.sa-contact .sa-field{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;padding:0}
.sa-contact .sa-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:1.3em}
.sa-contact .sa-field label{display:inline;margin:0;padding:0;font:700 calc(.88*var(--_r))/1.3 var(--_font);color:var(--_text);text-transform:none;letter-spacing:0}
.sa-contact .sa-field label{white-space:nowrap}
/* narrow panels: drop "(optional)" while an error shows, so the label row never wraps and nothing moves */
.sa-contact .sa-label-row.sa-has-err .sa-opt{display:none}
.sa-contact .sa-field label .sa-opt{font-weight:400;color:#6b6b78}
.sa-contact .sa-input{display:block;font:400 16px/1.35 var(--_font);color:var(--_text);background:#fff;border:1px solid var(--_border);border-radius:0;
  padding:9px 12px;min-height:44px;width:100%;max-width:none;margin:0;height:auto;box-shadow:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.sa-contact textarea.sa-input{min-height:120px;resize:vertical}
.sa-contact .sa-input:hover{border-color:#a9a9b3}
.sa-contact .sa-input:focus{outline:none;border-color:var(--_ink);box-shadow:0 0 0 3px rgba(0,0,0,.18);box-shadow:0 0 0 3px color-mix(in srgb,var(--_btn-bg) 55%,transparent)}
.sa-contact .sa-input[aria-invalid="true"]{border-color:var(--_danger);box-shadow:inset 3px 0 0 var(--_danger)}
.sa-contact .sa-input[aria-invalid="true"]:focus{box-shadow:inset 3px 0 0 var(--_danger),0 0 0 3px rgba(169,68,66,.25);box-shadow:inset 3px 0 0 var(--_danger),0 0 0 3px color-mix(in srgb,var(--_danger) 25%,transparent)}
.sa-contact .sa-input[readonly]{background:#f9f9fb;color:#6b6b78}

/* message slot on the label row: one short line, so nothing below ever moves */
.sa-contact .sa-msg{margin:0;padding:0;font-size:calc(.8*var(--_r));line-height:1.3em;color:#7a7a86;display:flex;align-items:center;gap:8px;text-align:right;white-space:nowrap;min-width:0}
.sa-contact .sa-msg-text{display:flex;gap:5px;align-items:center}
.sa-contact .sa-msg[data-kind="error"] .sa-msg-text{color:var(--_danger);font-weight:700}
.sa-contact .sa-msg[data-kind="error"] .sa-msg-text::before{content:"!";flex:none;width:14px;height:14px;border-radius:50%;background:var(--_danger);color:#fff;font:700 10px/14px var(--_font);text-align:center}
.sa-contact .sa-suggest{all:unset;box-sizing:border-box;color:var(--_link);font-weight:700;text-decoration:underline;cursor:pointer}
.sa-contact .sa-suggest:focus-visible{outline:2px solid var(--_ink);outline-offset:2px}
.sa-contact .sa-count{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.sa-contact .sa-count[data-over="true"]{color:var(--_danger);font-weight:700}

/* Turnstile: the widget is 65px tall and "flexible" fills the width; the slot is reserved so nothing jumps */
.sa-contact .sa-bot-slot{min-height:65px;margin:2px 0 12px}
/* widget error / unsupported / blocked / no render in 10s: the slot collapses to one small hint line */
.sa-contact .sa-bot-slot[data-state="fail"]{min-height:0;margin:0 0 10px}
.sa-contact .sa-bot-slot[data-state="fail"]>*:not(.sa-bot-fail){display:none!important}
.sa-contact .sa-bot-fail{margin:0;padding:0;display:flex;gap:5px;align-items:center;font-size:calc(.8*var(--_r))!important;line-height:1.3!important;color:#6b6b78}
.sa-contact .sa-bot-fail::before{content:"!";flex:none;width:14px;height:14px;border-radius:50%;background:var(--_danger);color:#fff;font:700 10px/14px var(--_font);text-align:center}
/* local demo badge (?sa-demo=..., localhost only) */
.sa-contact{position:relative}
.sa-contact .sa-demo-badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:calc(.7*var(--_r));line-height:1.4;letter-spacing:.04em;color:#5c4718;background:var(--_warn-bg);border:1px dashed #e0b252;border-radius:10px;pointer-events:none}
.sa-contact .sa-privacy{margin:0 0 16px;padding:0;font-size:calc(.8*var(--_r))!important;line-height:1.4!important;color:#6b6b78}
.sa-contact .sa-privacy a{color:var(--_link);font-weight:600}

.sa-contact .sa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;padding:0}
.sa-contact .sa-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:0;padding:12px 28px;float:none;
  font:700 calc(.95*var(--_r))/1.2 var(--_font);text-transform:uppercase;letter-spacing:.04em;color:var(--_btn-fg);background:var(--_btn-bg);
  border:2px solid var(--_btn-bg);border-radius:0;cursor:pointer;min-width:220px;width:auto;box-shadow:none;text-shadow:none;transition:background .15s,border-color .15s,transform .05s}
@media (max-width:600px){.sa-contact .sa-btn{width:100%;min-width:0}}
.sa-contact .sa-btn:hover{background:var(--_btn-hover);border-color:var(--_btn-hover);color:var(--_btn-fg)}
.sa-contact .sa-btn:active{transform:translateY(1px)}
.sa-contact .sa-btn:focus-visible{outline:3px solid var(--_ink);outline-offset:2px}
.sa-contact .sa-btn[aria-busy="true"]{cursor:progress}
.sa-contact .sa-spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid rgba(128,128,128,.4);border-top-color:var(--_btn-fg);animation:sa-spin .7s linear infinite}
@keyframes sa-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sa-contact .sa-spin{animation-duration:2.4s}}
.sa-contact .sa-live{font-size:calc(.86*var(--_r));line-height:1.3;color:#5f5f6b;min-height:1.3em;flex:1 1 180px;margin:0}
.sa-contact .sa-live[data-kind="error"]{color:var(--_danger);font-weight:600}

/* notices: always after the button, so nothing the visitor is using moves */
.sa-contact .sa-notice{margin:16px 0 0;padding:14px 16px;border-left:4px solid;font-size:calc(.9*var(--_r));line-height:1.5;display:flex;flex-direction:column;gap:8px}
.sa-contact .sa-notice strong{display:block;font-size:calc(.96*var(--_r))}
.sa-contact .sa-notice span{display:block}
.sa-contact .sa-notice p{margin:0}
.sa-contact .sa-notice--warn{background:var(--_warn-bg);border-color:#e0b252;color:#5c4718}
.sa-contact .sa-notice--error{background:var(--_danger-bg);border-color:var(--_danger);color:#6e2b29}
.sa-contact .sa-contact-lines{display:flex;flex-wrap:wrap;gap:4px 18px;font-weight:700}
.sa-contact .sa-contact-lines a{color:inherit;white-space:nowrap;text-decoration:underline}
.sa-contact .sa-alt{align-self:flex-start;background:#fff;border:1px solid currentColor;color:inherit;font:700 calc(.85*var(--_r))/1.2 var(--_font);padding:8px 14px;cursor:pointer;border-radius:0;min-height:40px;margin:0;text-transform:none;letter-spacing:0;width:auto;float:none}
.sa-contact .sa-alt:focus-visible{outline:2px solid var(--_ink);outline-offset:2px}

/* success: centred in the form's own height, so the page doesn't jump */
.sa-contact .sa-success{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;padding:24px 8px}
.sa-contact .sa-success:focus{outline:none}
.sa-contact .sa-check{width:112px;height:112px;margin:0 0 26px;position:relative}
.sa-contact .sa-check svg{width:100%;height:100%;overflow:visible;display:block}
.sa-contact .sa-check .ring-bg{fill:var(--_check-bg)}
.sa-contact .sa-check .ring{fill:none;stroke:var(--_btn-fg);stroke-width:3;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
.sa-contact .sa-check .tick{fill:none;stroke:var(--_btn-fg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.sa-contact .sa-check::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid var(--_check-bg);opacity:0}
.sa-contact .sa-done-eyebrow{margin:0 0 10px;padding:0;font-size:calc(.82*var(--_r));line-height:1.4;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--_link)}
.sa-contact .sa-success h4{margin:0;padding:0;font:700 calc(1.85*var(--_r))/1.2 var(--_font);text-transform:none;letter-spacing:0;color:var(--_text);text-wrap:balance;max-width:16em}
@media (max-width:600px){.sa-contact .sa-success h4{font-size:calc(1.5*var(--_r))}}
.sa-contact .sa-done-rule{width:48px;height:3px;background:var(--_accent);margin:22px 0 18px;padding:0;border:0}
.sa-contact .sa-done-call{margin:0;padding:0;font-size:calc(1*var(--_r));line-height:1.5;color:#5f5f6b}
.sa-contact .sa-done-call a{display:inline-block;margin-top:4px;font-size:calc(1.2*var(--_r));font-weight:700;color:var(--_ink);text-decoration:none;border-bottom:2px solid var(--_check-bg);white-space:nowrap}
.sa-contact .sa-done-call a:hover{border-bottom-color:var(--_ink)}
.sa-contact .sa-done-call a:focus-visible{outline:2px solid var(--_ink);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .sa-contact .sa-check .ring-bg{transform-origin:50% 50%;animation:sa-pop .45s cubic-bezier(.2,1.4,.4,1) both}
  /* hidden until each draw starts: a round cap on a zero-length dash otherwise shows as a dot */
  .sa-contact .sa-check .ring{stroke-dashoffset:302;opacity:0;animation:sa-draw .6s ease-out .1s forwards}
  .sa-contact .sa-check .tick{stroke-dashoffset:60;opacity:0;animation:sa-draw .35s ease-out .55s forwards}
  .sa-contact .sa-check::after{animation:sa-pulse .9s ease-out .7s}
  .sa-contact .sa-done-eyebrow,.sa-contact .sa-success h4,.sa-contact .sa-done-rule,.sa-contact .sa-done-call{animation:sa-rise .45s ease-out both}
  .sa-contact .sa-done-eyebrow{animation-delay:.55s}.sa-contact .sa-success h4{animation-delay:.65s}.sa-contact .sa-done-rule{animation-delay:.8s}.sa-contact .sa-done-call{animation-delay:.9s}
}
@keyframes sa-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sa-draw{from{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes sa-pulse{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.15)}}
@keyframes sa-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sa-contact .sa-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sa-hp{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}
.sa-contact a[href^="tel:"]{white-space:nowrap}
.sa-contact .sa-notice a{color:inherit;text-decoration:underline}
/* demo-mode stand-in for the Turnstile success state (never rendered in production) */
.sa-contact .sa-ts{height:65px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 14px;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;color:#232323}
.sa-contact .sa-ts-left{display:flex;align-items:center;gap:12px;font-size:14px;min-width:0}
.sa-contact .sa-ts-ok{width:24px;height:24px;flex:none;border-radius:50%;background:#1a8a3a;position:relative}
.sa-contact .sa-ts-ok::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.sa-contact .sa-ts-brand{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.sa-contact .sa-ts-brand b{font:800 10px/1 -apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;color:#f38020}
.sa-contact .sa-ts-brand small{font-size:9px;color:#6d6d6d}