/* Contact + FAQ (linked only from contact.html and faq.html). Builds on styles.css tokens/components. */

/* ---------- page head ---------- */
.b-head{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.25rem,5vw,3.5rem)}
.b-head h1{font-size:clamp(2.5rem,6vw,4.4rem);max-width:15ch;margin-bottom:.3em}
.b-head .lede{max-width:34rem}
.assure{list-style:none;margin:clamp(2rem,4vw,2.75rem) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--brass-lo)}
.assure li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:1rem;align-items:start;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.assure svg{width:28px;height:28px;color:var(--brass);margin-top:2px}
.assure strong{display:block;font:500 1.2rem/1.2 var(--display);color:var(--stone);margin-bottom:.15rem}
.assure span{color:var(--silver);font-size:.98rem;line-height:1.5}
@media (min-width:860px){
  .assure{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,2.75rem)}
  .assure li{border-bottom:0;padding-bottom:0}
}

.b-body{padding:clamp(2.5rem,6vw,4.75rem) 0 clamp(4rem,8vw,6.5rem)}

/* ---------- inline links: keep a 44px hit area without changing line rhythm ---------- */
.b-next p a,.b-faq-list p a,.b-faq-side p a:not(.rule-link),.thread-tools a,.site-footer p a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;padding:0;vertical-align:baseline}

.site-footer li a{min-width:44px}

/* ---------- contact: form ---------- */
.b-contact{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:900px){.b-contact{grid-template-columns:1fr}}
.b-form{padding:clamp(1.5rem,4vw,3rem);--cut:20px}
.b-form-title{font-size:clamp(1.8rem,3vw,2.3rem);margin:0 0 .25rem}
.b-form-sub{color:var(--silver);font-size:.95rem;margin:0 0 2rem}
.b-form .field{margin-bottom:1.75rem;gap:.55rem}
.b-form .field-row{gap:0 1.5rem}
.b-form label{font:600 1.08rem/1.2 var(--display);letter-spacing:.02em;text-transform:none;color:var(--stone)}
.b-form input,.b-form select,.b-form textarea{min-height:52px;font-size:1.0625rem;background:var(--ground)}
.b-form textarea{min-height:170px}
.b-form .hint{font-size:.92rem;line-height:1.45}
/* field-level errors appear only after the visitor has touched the field */
.field-msg{display:none;font-size:.92rem;font-weight:600;color:var(--error);line-height:1.35}
.field-msg::before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;transform:rotate(45deg);margin-right:.5rem;vertical-align:1px}
.b-form :is(input,select,textarea):user-invalid{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.b-form :is(input,select,textarea):user-invalid ~ .field-msg{display:block}
/* spam check: space reserved at widget size so nothing shifts when it loads */
.b-ts{gap:.5rem}
.b-ts-label{font:600 1.08rem/1.2 var(--display);letter-spacing:.02em;color:var(--stone)}
#turnstile-box{min-height:72px;width:100%;max-width:304px}
#turnstile-box.ts-note{max-width:none;display:flex;align-items:center;color:var(--silver)}
.b-form .error{display:flex;gap:.7rem;align-items:baseline;margin:0 0 1.5rem;padding:.85rem 1rem;border:1px solid rgba(240,160,143,.55);background:rgba(240,160,143,.08);line-height:1.45}
.b-form .error::before{content:"";flex:none;width:8px;height:8px;background:var(--error);transform:rotate(45deg) translateY(-2px)}
.b-form .error[hidden]{display:none}
.b-submit{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.b-submit .btn{min-width:12rem}
.b-submit-note{color:var(--silver);font-size:.95rem}
.b-form .note{margin-top:2rem}

/* ---------- contact: thread ---------- */
.b-thread h2{font-size:clamp(1.8rem,3vw,2.3rem);margin-bottom:.4rem}
.b-thread .thread-tools{line-height:1.5}
.b-mono{flex:none;display:grid;place-items:center;width:42px;height:42px;background:var(--ground-4);color:var(--stone);font-size:.95rem;clip-path:var(--oct-badge)}
.chat-top > div{min-width:0}
.chat-top span:not(.b-mono):not(.amp){display:block}
.b-thread .chat-log,.b-ask .chat-log{min-height:260px;max-height:520px;padding:1.5rem 1.25rem;gap:1rem}
.b-thread .chat-log:empty::before{content:"Loading your conversation";margin:auto;color:var(--silver);font-size:.95rem}
.b-thread .msg,.b-ask .msg{max-width:min(86%,34rem);padding:.85rem 1.1rem}
.b-thread .msg time{opacity:1;color:var(--silver)}
.b-thread .msg.me time{color:var(--on-stone)}
.b-thread .chat-form input,.b-ask .chat-form input{min-height:48px}
.b-thread .chat-form .btn,.b-ask .chat-form .btn{min-height:48px;min-width:5.5rem}

/* ---------- contact: what happens next (quiet) ---------- */
.b-next{padding-top:.25rem}
@media (min-width:901px){.b-next{position:sticky;top:96px}}
.b-next h2{font-size:clamp(1.6rem,2.6vw,2rem);margin-bottom:1rem}
.b-next ol{margin-bottom:1.5rem}
.b-next li{grid-template-columns:36px minmax(0,1fr);padding:1.15rem 0}
.b-n{display:grid;place-items:center;width:30px;height:30px;margin-top:1px;background:var(--ground-3);color:var(--brass);font:500 1rem/1 var(--display);clip-path:var(--oct-badge)}
.b-next li strong{font-size:1.2rem}
.b-next li span{line-height:1.5}
.b-area{color:var(--silver);font-size:.95rem;margin-bottom:1rem}

/* ---------- FAQ: assistant first ---------- */
.b-ask{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.b-ask{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(3rem,6vw,5.5rem)}.b-ask-side{position:sticky;top:96px}}
.b-ask-side h2{font-size:clamp(2rem,4vw,2.9rem)}
.b-ask-side p{color:var(--silver);max-width:36ch}
.b-limits{border-top:1px solid var(--brass-lo);padding-top:1rem;margin-top:1.5rem;font-size:.95rem}
.b-chips-label{margin:0;padding:.25rem 1.25rem .65rem;font:600 .74rem/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--silver)}
.b-ask .chips{padding:0 1.25rem 1.1rem}
.b-ask .chips button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- FAQ: accordion ---------- */
.b-faq{background:var(--ground-2);padding:clamp(4rem,9vw,7rem) 0;border-top:1px solid var(--rule)}
.b-faq-grid{display:grid;gap:2rem}
@media (min-width:900px){.b-faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}.b-faq-side{position:sticky;top:96px}}
.b-faq-side h2{font-size:clamp(2rem,4vw,2.9rem)}
.b-faq-side p{color:var(--silver);max-width:32ch}
.b-faq-list summary{padding:.85rem 0;font-size:clamp(1.2rem,2vw,1.4rem)}
.b-faq-list summary:focus-visible{outline-offset:2px}
.b-faq-list details p{padding-bottom:1.1rem;font-size:1.02rem}

/* ---------- contact: close conversation ---------- */
.b-thread .chat-form[hidden],.b-close[hidden],.b-close-confirm[hidden],.b-close-btn[hidden],.b-closed[hidden],#new-request-row[hidden]{display:none}
.b-close{margin-top:1.25rem}
.b-close-btn{color:var(--silver);text-decoration-color:var(--rule)}
.b-close-btn:hover{color:var(--stone);text-decoration-color:var(--brass)}
.b-close-confirm{margin-top:.25rem;padding:1rem 1.1rem;border:1px solid var(--rule);border-left:3px solid var(--brass-lo);background:var(--ground-2)}
.b-close-confirm p{margin:0 0 .75rem;color:var(--stone);line-height:1.5}
.b-close-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.b-close-confirm .error{margin:.75rem 0 0}
.b-closed{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.85rem 1.25rem;padding:1.1rem 1.25rem;border-top:1px solid var(--brass-lo);background:var(--ground-3)}
.b-closed-text{margin:0;flex:1 1 18rem;color:var(--stone);line-height:1.5}