/* Beautech — page styles: Contact. Loaded after assets/site.css. */
.sec { padding: var(--sec-y-tight) 0; }

/* guided-brief banner */
.brief-banner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:24px; padding:20px 24px; border:1px solid var(--accent); border-radius: var(--radius-lg);
  background:var(--accent-tint); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-slow); }
.brief-banner:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.brief-banner .bb-k{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--accent-d); display:block; }
.brief-banner .bb-t{ font-family:var(--f-display); font-weight: var(--fw-head); font-size: var(--ds-md); color:var(--heading); display:block; margin-top:4px; }
.brief-banner .bb-d{ font-size: var(--fs-base); color:var(--ink-soft); display:block; margin-top:6px; max-width:54ch; }
.brief-banner .bb-go{ font-family:var(--f-mono); font-size: var(--fs-sm); letter-spacing: var(--track-wide); text-transform:uppercase; color:#fff; background:var(--accent); padding:12px 20px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition: background var(--dur-base); }
.brief-banner:hover .bb-go{ background:var(--accent-d); }
.brief-banner .bb-go .arrow{ transition: transform var(--dur-base) ease; }
.brief-banner:hover .bb-go .arrow{ transform:translateX(4px); }

.contact-grid{ display:grid; grid-template-columns: 1fr 0.85fr; gap:var(--gap-xl); align-items:start; }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

/* form */
.form-card{ background:var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-lg); padding:var(--gap-sm); }
.fld{ margin-bottom:20px; }
.fld label{ display:block; font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fld label .req{ color:var(--signal); }
.fld input, .fld select, .fld textarea{
  width:100%; font-family:var(--f-sans); font-size: var(--fs-base); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.fld textarea{ resize:vertical; min-height:120px; }
/* Decoration, not the indicator. The accent border + tint halo are the designed
   focus look and stay on :focus for pointer and keyboard alike. The outline is
   deliberately NOT suppressed here: --accent-tint is ~1.1:1 against the white
   field, so this halo cannot carry the 3:1 a non-text focus indicator needs.
   site.css's :focus-visible ring supplies the real one (--focus-ring, 10.4:1 on
   the white card), and its :focus:not(:focus-visible) rule keeps mouse focus
   ring-free. Do not re-add outline:none. */
.fld input:focus, .fld select:focus, .fld textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .fld-row{ grid-template-columns:1fr; } }
.chips-input{ display:flex; flex-wrap:wrap; gap:8px; }
.chips-input button{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform:uppercase; padding:8px 12px; border:1px solid var(--line); border-radius: var(--radius-pill); color:var(--ink-soft); transition: var(--dur-fast); }
.chips-input button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.form-submit{ display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
.form-note{ font-size: var(--fs-sm); color:var(--muted); }
.form-ok{ display:none; padding:16px 16px; background:var(--accent-tint); border:1px solid var(--accent); border-radius:var(--radius); color:var(--accent-d); font-size: var(--fs-base); margin-bottom:20px; }
.form-ok.show{ display:block; }

/* contact info side */
.cinfo .ci-block{ padding:20px 0; border-top:1px solid var(--line); }
.cinfo .ci-block:first-child{ border-top:0; padding-top:0; }
.cinfo .ck{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cinfo .cv{ font-size: var(--fs-md); }
.cinfo .cv a{ color:var(--accent); }
.cinfo .cv.addr{ font-size: var(--fs-base); color:var(--ink-soft); line-height: var(--lh-body); }
.hours{ display:flex; justify-content:space-between; font-size: var(--fs-base); padding:4px 0; color:var(--ink-soft); }
.hours span:first-child{ color:var(--ink); }

.faq-mini{ margin-top:8px; }
.qbar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--gap-lg); }
.qb{ background:var(--surface-2); padding:24px 24px; }
.qb svg{ width:26px;height:26px;color:var(--accent); }
.qb h4{ font-family:var(--f-display); font-weight: var(--fw-head); font-size: var(--fs-lg); margin:12px 0 8px; }
.qb p{ font-size: var(--fs-base); color:var(--ink-soft); }
@media(max-width:760px){ .qbar{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------
   Additions — accessible form semantics (labels, errors, live region).
   Kept below the imported block so the later cross-page dedupe pass can
   still diff the original rules cleanly.
   ------------------------------------------------------------------ */

/* Group label for the chip group — a <label> would have no control to point
   at, so the visual style of `.fld label` is mirrored onto a plain element
   that acts as the group's aria-labelledby target. */
.fld .fld-lbl{ display:block; font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fld .fld-lbl .req{ color:var(--signal); }

/* Validation */
.fld input.is-invalid, .fld select.is-invalid, .fld textarea.is-invalid{ border-color:var(--signal); }
.fld-err{ display:none; margin-top:6px; font-size: var(--fs-sm); line-height: var(--lh-snug); color:var(--signal); }
.fld-err.show{ display:block; }
.fld-err .err-msg{ display:none; }
.fld-err .err-msg.on{ display:block; }

/* Success / hand-off panel */
/* #formOk is tabindex="-1" — a script focus target for the live region, not a
   control — so site.css's [tabindex="-1"]:focus{outline:none} already keeps a
   page-wide ring off it. The local override said the same thing twice. */
.form-ok .fo-t{ font-family:var(--f-display); font-size: var(--fs-lg); line-height: var(--lh-tight); color:var(--heading); margin:0 0 8px; }
.form-ok .fo-d{ margin:0; color:var(--ink-soft); }
.form-ok .fo-a{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.form-ok .fo-btn{ font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform:uppercase; padding:12px 16px; border-radius:var(--radius); border:1px solid var(--accent); background:var(--accent); color:#fff; display:inline-flex; align-items:center; gap:8px; transition: background var(--dur-base); }
.form-ok .fo-btn:hover{ background:var(--accent-d); border-color:var(--accent-d); }
.form-ok .fo-btn.fo-ghost{ background:transparent; color:var(--accent-d); }
.form-ok .fo-btn.fo-ghost:hover{ background:var(--paper); }
.form-ok .fo-f{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--accent); font-size: var(--fs-sm); color:var(--ink-soft); }
.form-ok .fo-f a{ color:var(--accent-d); text-decoration:underline; }

/* shown only when a long project description had to be trimmed out of the
   mailto: link — see the length guard in the page's inline script */
.fo-trim {
  margin-top: 12px; padding: 12px 16px;
  border-left: 3px solid var(--signal);
  background: var(--surface); color: var(--ink-soft);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}