/* estimate-form.css - the website's own request form (templates/partials/estimate-form.html). Its own file on
   purpose: site.css sits 35 bytes under the 84,000-byte ceiling (scripts/perf_check.py CSS_MAX_BYTES) and this
   sheet loads only on the two landing pages. Every value is a site.css token; the controls follow the .btn pill,
   the --line-strong control boundary and the --brand focus ring the rest of the site uses. */
.ef__form { display: grid; gap: 30px; }
.ef__form[hidden] { display: none; }
.ef__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.ef__legend { padding: 0; margin: 0 0 4px; width: 100%; font: 700 clamp(1.1875rem, 2vw, 1.3125rem)/1.15 var(--font-head); letter-spacing: -.02em; }
.ef__req, .ef__opt { display: inline-block; margin-left: 8px; font: 600 .8125rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink); vertical-align: middle; }
.ef__opt { font-weight: 500; color: var(--muted); }
.ef__help { margin: 0 0 -6px; font-size: .9375rem; color: var(--muted); }
.ef__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ef__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px 18px; }
.ef__choice { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.ef__choice:hover { border-color: var(--line-strong); }
.ef__choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ef__choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.ef__choice span { line-height: 1.35; }
.ef__choice small { color: var(--muted); }
.ef__choice--wide { grid-column: 1 / -1; }

.ef__grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ef__field--full { grid-column: 1 / -1; }
.ef__field { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; }
.ef__field[hidden] { display: none; }
.ef__field small { font-weight: 500; color: var(--muted); }
/* the 5% drop-down's help line; its rule keeps the two text-consent boxes below visibly apart (panel 10/7) */
.ef__hint { margin: -8px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.45; color: var(--muted); }
.ef input[type="text"], .ef input[type="email"], .ef input[type="tel"], .ef input[type="date"], .ef select, .ef textarea {
  width: 100%; min-height: 3rem; padding: .6em .9em; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: 400 1rem/1.3 var(--font-body);
}
.ef textarea { min-height: 5.5rem; resize: vertical; }
.ef .is-invalid { border-color: var(--danger); }
.ef__error { display: block; margin: 0; font: 500 .875rem/1.35 var(--font-body); color: var(--danger); }
.ef__error[hidden] { display: none; }
.ef__error--form { font-size: .9375rem; }

.ef__addr { position: relative; display: block; }
.ef__suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 16rem; overflow: auto; }
.ef__suggest[hidden] { display: none; }
.ef__suggest li { padding: 9px 12px; cursor: pointer; font-weight: 400; }
.ef__suggest li:hover, .ef__suggest li[aria-selected="true"] { background: var(--brand-soft); }

.ef__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ef__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-weight: 500; background: var(--surface); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.ef__chip input { accent-color: var(--brand); width: 18px; height: 18px; margin: 0; }
.ef__chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }

.ef__drop { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-weight: 400; }
.ef__drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.ef__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ef__ico { width: 34px; height: 34px; color: var(--brand); }
.ef__drop b { font-weight: 600; }
.ef__drop small { color: var(--muted); }
.ef__thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ef__thumbs:empty { display: none; }
.ef__thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

.ef__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--caption); }
.ef__consent input { accent-color: var(--brand); width: 20px; height: 20px; margin: 0; flex: none; } /* V7-q: the 20px box the service ticks use */
/* V7-q: everything after the box is ONE span, so it wraps as one paragraph beside the box. As bare text + <small> + <a>
   in the flex label, each run was its own flex column ("(optional)" | the wording | the links - owner, 2026-10-03). */
.ef__consent-text { flex: 1; min-width: 0; line-height: 1.45; }
.ef__consent-lead { color: var(--ink); }
.ef__consent-legal { font-size: .8125rem; color: var(--muted); } /* the A2P disclosures: 13px, 8.2:1 on white - small, never hidden */

.ef__send { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.ef__submit { width: 100%; max-width: 26rem; font-size: 1.0625rem; }
.ef__submit[disabled] { opacity: .7; cursor: progress; }

.ef__thanks { display: grid; gap: 12px; padding: 8px 0; }
.ef__thanks[hidden] { display: none; }
.ef__ok { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; color: var(--brand); }
.ef__ok svg { width: 26px; height: 26px; }
.ef__thanks-title { margin: 0; }
.ef__thanks p { max-width: 60ch; }

.ef input:focus-visible, .ef select:focus-visible, .ef textarea:focus-visible, .ef__choice:has(input:focus-visible), .ef__chip:has(input:focus-visible), .ef__drop:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 559px) { .ef__submit { max-width: none; } .ef__legend { font-size: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .ef__choice, .ef__chip { transition: none; } }
.ef__editing{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#fff7e6;border:1px solid #f0d9a8;color:#5a3d00;font-size:.95rem;line-height:1.45}

/* V7-p / V7-q before/after strip (partials/photo-strip.html; owner 2026-10-03). Phones + tablets (< 900px): one
   swipeable row, CSS scroll-snap, ~a quarter of a 390x844 screen, the next photo peeking in (an item is 70% of the row,
   300px at most so a tablet's row stays short). >= 900px: three across in the 1016px band. Here, not in site.css. */
.ba-strip { display: flex; gap: 10px; padding-block: 10px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.ba-strip::-webkit-scrollbar { display: none; }
.ba-strip__item { flex: 0 0 min(70%, 300px); scroll-snap-align: start; }
.ba-strip__img { border-radius: var(--radius-sm); overflow: hidden; }
.ba-strip__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ba-strip__cap { margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
  .ba-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 20px 8px; overflow: visible; }
  .ba-strip__cap { margin-top: 8px; font-size: .9375rem; }
}