/* start flow — service selector + short intake, shown before booking a call. The panel is paper (like .band--paper), so everything inside has to override refined.css's dark .form/.field styling, which is global and not scoped. */ .sm{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(1rem,4vw,3rem) clamp(1rem,4vw,2rem)} .sm.is-open{display:block} body.sm-locked{overflow:hidden} /* the modal mounts on , outside .gf — restate the base type it would otherwise inherit from the page wrapper */ .sm-panel{position:relative;max-width:620px;margin:0 auto;background:var(--paper);border:1px solid var(--hair-d);padding:clamp(1.8rem,4.5vw,2.7rem);font-family:var(--body);font-size:17px;line-height:1.75;color:var(--ink-body);-webkit-font-smoothing:antialiased;text-align:left} .sm-x{position:absolute;top:.5rem;right:.7rem;background:none;border:0;color:var(--ink-mute);font-size:1.75rem;line-height:1;cursor:pointer;padding:.3rem .5rem;transition:color .15s} .sm-x:hover{color:var(--gold-dk)} .sm-x:focus-visible{outline:1px solid var(--gold-dk);outline-offset:2px} .sm-step{display:none} .sm-step.is-active{display:block} .sm .eyebrow{color:var(--gold-dk)} .sm-h{font-family:var(--disp);font-weight:400;line-height:1.16;font-size:clamp(1.5rem,3.4vw,2.05rem);letter-spacing:-.01em;color:#111;margin-bottom:.55rem} .sm-h em{font-style:italic;color:var(--gold-dk)} .sm-sub{color:var(--ink-mute);font-size:.94rem;line-height:1.65;margin-bottom:1.7rem;max-width:46ch} /* choice cards */ .sm-choices{display:grid;gap:.9rem} .sm-choice{position:relative;display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--hair-d);padding:1.15rem 3.4rem 1.15rem 1.2rem;cursor:pointer;font-family:var(--body);transition:border-color .18s,background .18s} .sm-choice:hover{border-color:var(--gold);background:#faf8f2} .sm-choice:focus-visible{outline:1px solid var(--gold-dk);outline-offset:2px} .sm-choice[aria-pressed="true"]{border-color:var(--gold-dk);background:#fdfaf0} .sm-choice-t{display:block;font-family:var(--disp);font-size:1.14rem;color:#111;margin-bottom:.22rem} .sm-choice-d{display:block;font-size:.87rem;line-height:1.55;color:var(--ink-mute)} .sm-tick{position:absolute;top:50%;right:1.2rem;margin-top:-10px;width:20px;height:20px;border:1px solid rgba(0,0,0,.22);border-radius:50%} .sm-choice[aria-pressed="true"] .sm-tick{border-color:var(--gold-dk);background:var(--gold-dk)} .sm-choice[aria-pressed="true"] .sm-tick::after{content:"";position:absolute;top:5px;left:5px;width:9px;height:5px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg)} .sm-err{display:none;margin-top:.95rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#b3261e} .sm-err.show{display:block} /* form fields — override refined.css's dark treatment for the paper panel */ .sm .field label{color:var(--gold-dk)} /* background-color, NOT the `background` shorthand — the shorthand would reset the no-repeat/right-center placement refined.css gives the select chevron, tiling it across the whole control. */ .sm .field input,.sm .field select,.sm .field textarea{background-color:var(--paper);color:#111;border:1px solid var(--hair-d)} .sm .field input::placeholder,.sm .field textarea::placeholder{color:#8f8f8f} .sm .field input:focus,.sm .field select:focus,.sm .field textarea:focus{border-color:var(--gold-dk)} .sm .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238a7326' stroke-width='1.6'/%3E%3C/svg%3E")} .sm .field select:required:invalid{color:#8f8f8f} .sm .field option{color:#111;background-color:var(--paper)} .sm .form textarea{min-height:92px} .sm .form-msg.ok{background:#f1f8ef;border:1px solid #bcdcb2;color:#2f5a27} .sm .form-msg.err{background:#fdf2f2;border:1px solid #e5bcbc;color:#9b2c2c} .sm .form-note{color:var(--ink-mute)} .sm-req{color:var(--gold-dk)} .sm-back{display:block;margin:1.05rem auto 0;background:none;border:0;padding:.2rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;transition:color .15s} .sm-back:hover{color:var(--gold-dk)} /* confirmation */ .sm-done{text-align:center} .sm-done-mark{width:52px;height:52px;margin:0 auto 1.3rem;border:1px solid var(--gold-dk);border-radius:50%;position:relative} .sm-done-mark::after{content:"";position:absolute;top:17px;left:16px;width:18px;height:9px;border-left:1.6px solid var(--gold-dk);border-bottom:1.6px solid var(--gold-dk);transform:rotate(-45deg)} .sm-done .sm-sub{margin:0 auto 1.7rem} @media(max-width:520px){ .sm{padding:0} .sm-panel{min-height:100%;border:0;padding:3.1rem 1.35rem 2.4rem} }