/* Realistic request form for the demo sites. Each demo sets --f-accent, --f-accent-dark, --f-ink, --f-line, --f-soft, --f-radius.
   Nothing is submitted: the button opens the "sample form" note (CSS :target, no script). */
.demo-form { background: #fff; color: var(--f-ink, #161a1f); border-radius: calc(var(--f-radius, 8px) * 1.6); padding: 2rem; box-shadow: 0 30px 70px rgba(0,0,0,.28); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }
.demo-form-head { margin-bottom: 1.5rem; }
.demo-form-head h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; color: var(--f-ink, #161a1f); margin: 0 0 .35rem; text-transform: none; font-family: inherit; font-weight: 800; }
.demo-form-head p { color: #5b6370; font-size: .95rem; margin: 0; }
.demo-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.demo-field { display: flex; flex-direction: column; gap: .4rem; }
.demo-field label { font-size: .88rem; font-weight: 700; color: var(--f-ink, #161a1f); letter-spacing: 0; text-transform: none; }
.demo-field label span { color: #6b7280; font-weight: 500; }
.demo-field input, .demo-field select, .demo-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--f-ink, #161a1f); background: #fff; border: 1.5px solid var(--f-line, #d6d3cd); border-radius: var(--f-radius, 8px); padding: .8rem .95rem; min-height: 50px; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.demo-field input::placeholder, .demo-field textarea::placeholder { color: #9aa0a8; }
.demo-field select { padding-right: 2.6rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; color: var(--f-ink, #161a1f); }
.demo-field textarea { min-height: 110px; resize: vertical; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus { outline: none; border-color: var(--f-accent, #a94219); box-shadow: 0 0 0 4px var(--f-soft, rgba(169,66,25,.15)); }
.demo-field.full { grid-column: 1 / -1; }
.demo-drop { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; border: 1.5px dashed var(--f-line, #d6d3cd); border-radius: var(--f-radius, 8px); padding: .9rem 1rem; color: #5b6370; font-size: .92rem; background: #fafaf8; }
.demo-drop svg { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke: var(--f-accent, #a94219); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-drop strong { color: var(--f-ink, #161a1f); }
.demo-submit { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; min-height: 56px; border-radius: var(--f-btn-radius, var(--f-radius, 8px)); background: var(--f-accent, #a94219); color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 10px 22px var(--f-soft, rgba(169,66,25,.25)); transition: background .2s, transform .2s; }
.demo-submit::after { content: "\2192"; }
.demo-submit:hover { background: var(--f-accent-dark, #8a3513); transform: translateY(-1px); }
.demo-form-foot { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .9rem 0 0; color: #6b7280; font-size: .85rem; text-align: center; }
.demo-form-foot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
@media (min-width: 560px) { .demo-form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .demo-form { padding: 1.4rem; } }
/* Section styles on dark bands (".pro-request p", ".br-estimate p") must not restyle the form's own text. */
.demo-form p.demo-form-foot, .demo-form .demo-form-head p { color: #5b6370; max-width: none; margin-top: 0; font-size: .9rem; opacity: 1; }
.demo-form p.demo-form-foot { margin-top: .9rem; font-size: .85rem; color: #6b7280; }
.demo-form .demo-form-head h3 { color: var(--f-ink, #161a1f); }

/* The lock icon sits right beside the note's first word, and the note wraps evenly. */
.demo-form p.demo-form-foot { display: block; text-wrap: balance; }
.demo-form-foot svg { display: inline-block; vertical-align: -2px; margin-right: .4rem; }

/* Compact form (2026-10-27): shorter fields and tighter spacing, so the whole form fits a laptop screen. */
.demo-form { padding: 1.6rem 1.75rem; }
.demo-form-head { margin-bottom: 1.1rem; }
.demo-form-grid { gap: .8rem; }
.demo-field { gap: .3rem; }
.demo-field input, .demo-field select, .demo-field textarea { min-height: 44px; padding: .6rem .85rem; }
.demo-field textarea { min-height: 72px; }
.demo-drop { padding: .65rem .9rem; }
.demo-submit { margin-top: 1.1rem; min-height: 52px; }