/* Contact template (/contact-us/, /request-a-phone-consultation/, /thank-you/, /store/contact-us/): the template's own
   part of design/templates/contact/contact.css, unchanged. The shared tail (the form panel, the 56px field,
   lv-arthead--split, lv-specs--stack) is in the global stylesheet; the design's states sheet is not a page.
   Awaiting Lalit's OK there and here: the text area, .f, .req, the field error and lv-notice. */
/* ---------- Page head (hook ct-head on lv-arthead--split): the form shell on the right. The form is taller than the
   copy, so the columns start together and the panel's top lines up with the H1, under the breadcrumb ---------- */
.ct-head { padding-bottom: 80px; }
.lv-arthead--split.ct-head .grid { gap: 64px; align-items: start; }
.ct-head .copy { padding-bottom: 8px; }
.ct-head .lead { margin-top: 24px; max-width: 30em; }
.ct-head .tool { padding-top: 48px; }
@media (max-width: 1100px) { .lv-arthead--split.ct-head .grid { gap: 48px; } .ct-head .tool { padding-top: 0; max-width: 680px; } }
/* In the design the shared lv-arthead--split block comes after these rules, so its phone padding wins; this sheet loads
   after the shared one, so the rule is repeated here to keep that order. */
@media (max-width: 767px) { .ct-head { padding-bottom: 56px; } }

/* ---------- The form's intro line, tucked under its heading ---------- */
.ct-intro { margin: -12px 0 0; }

/* ---------- Awaiting Lalit's OK on the brand kit styles (NEW-COMPONENTS.md), so kept here and not in the shared
   field block yet: the text area, the field wrapper and the "(required)" mark. The field itself is the shared
   56px field at the end of this file ---------- */
.lv-form .f { display: grid; }
.lv-form .req { font-weight: 400; color: var(--c-ink-soft); }
.lv-form textarea { width: 100%; min-height: 168px; margin: 0; padding: 14px 18px; font: 400 19px/1.5 var(--font-body); color: var(--c-ink);
  background: var(--c-paper); border: 1.5px solid var(--c-control); border-radius: var(--radius-ctl); resize: vertical; display: block; }
.lv-form textarea:hover { border-color: var(--c-accent); }

/* ---------- Field error (brand kit): 2px error edge, an 18px 600 message under the field, aria-invalid and
   aria-describedby (set by the script). Errors only ever sit on the paper panel (7.69:1), never on stone ---------- */
.lv-form .f.is-invalid input, .lv-form .f.is-invalid textarea, .lv-form .f.is-invalid select { border: 2px solid var(--c-error); padding-left: 17.5px; }
.lv-form .err { margin: 8px 0 0; font: 600 var(--fs-ui)/1.4 var(--font-body); color: var(--c-error); }
@media (forced-colors: active) { .lv-form .f.is-invalid input, .lv-form .f.is-invalid textarea, .lv-form .f.is-invalid select { border: 3px solid CanvasText; } }

/* ---------- lv-notice (awaiting Lalit's OK): a 4px rule on the left and text, no box, at the lv-act geometry (28px).
   --error is the "Please try again." summary with a link to each field; --success is the success notice
   (--c-success, 9.34:1 on paper) ---------- */
.lv-notice { padding: 2px 0 2px 28px; border-left: 4px solid var(--c-accent); }
.lv-notice[hidden] { display: none; }
.lv-notice .t { margin: 0; font: 700 22px/1.35 var(--font-body); }
.lv-notice p + p { margin-top: 8px; }
.lv-notice ul { list-style: none; margin-top: 4px; }
.lv-notice li a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; font-size: var(--fs-ui); color: var(--c-error); }
.lv-notice:focus { outline: none; }
.lv-notice:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: 6px; }
.lv-notice--error { border-left-color: var(--c-error); }
.lv-notice--error .t { color: var(--c-error); }
.lv-notice--success { border-left-color: var(--c-success); }
.lv-notice--success .t { color: var(--c-success); }
@media (forced-colors: active) { .lv-notice { border-left-color: CanvasText; } .lv-notice li a { color: LinkText; } }

/* ---------- Thank-you page ---------- */
.lv-thanks .inner { max-width: 880px; }
.lv-thanks h1 { margin-top: 48px; }
.lv-thanks .lv-notice { margin-top: var(--s4); max-width: 34em; }
.lv-gift .grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.lv-gift .lv-media { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .lv-gift .grid { grid-template-columns: 1fr; } .lv-gift .lv-media { max-width: 480px; } }
.lv-social .lv-head { margin-bottom: 0; }
/* The heading on the left, the three links on the right: the band has nothing else to fill it */
@media (min-width: 901px) { .lv-social .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .lv-social .lv-actions { margin-top: 0; } }


/* Slot labels (placeholders until the photos land) wrap over two lines: body line height, as in the finder */
.lv-media .slot span { line-height: 1.5; }