/* Form styles for pages built on the subpage shell.
   The contact form's CSS lives inline in index.html, which is the only page that carries
   it — a form dropped on any other page renders unstyled. Copied here rather than moved,
   because the home page is live and a regression there costs real enquiries. */

.fcard{background:var(--card, #ffffff);color:var(--ink, #181410);border-radius:var(--r-lg, 26px);padding:32px;box-shadow:var(--sh-lg, 0 24px 60px -24px rgba(24,20,16,.30))}

.frow{margin-bottom:16px}

.frow label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2, #3d362f);margin-bottom:7px}

.frow label .opt{text-transform:none;letter-spacing:0;color:var(--muted, #7a7168);font-weight:400}

.frow input,.frow select,.frow textarea{width:100%;background:var(--paper, #fbf8f4);border:1.5px solid var(--line, #ece5db);border-radius:var(--r-sm, 10px);padding:13px 15px;font-size:16px;font-family:inherit;color:var(--ink, #181410);transition:border-color .18s ease,box-shadow .18s ease}

.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--orange, #F58220);box-shadow:0 0 0 3px rgba(245,130,32,.15)}

.frow textarea{resize:vertical;min-height:88px}

.frow-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media(max-width:480px){.frow-2{grid-template-columns:1fr}}

.fsub{width:100%;justify-content:center;margin-top:4px}

.fnote{font-size:12px;color:var(--muted, #7a7168);text-align:center;margin-top:12px}

.drop{position:relative;border:2px dashed var(--line, #ece5db);border-radius:var(--r-sm, 10px);padding:20px;text-align:center;background:var(--paper, #fbf8f4);cursor:pointer;transition:border-color .18s,background .18s}

.drop:hover,.drop.drag{border-color:var(--orange, #F58220);background:var(--orange-tint, #FFF3E8)}

.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}

.drop .di{pointer-events:none;display:flex;flex-direction:column;gap:4px;align-items:center}

.drop svg{width:26px;height:26px;color:var(--orange-dk, #D96D0F)}

.drop .dt{font-size:14px;font-weight:600;color:var(--ink-2, #3d362f)}

.drop .dh{font-size:12px;color:var(--muted, #7a7168)}

.flist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

.flist:empty{margin:0}

/* The form's own button. `.btn` and `.btn svg` live inline in index.html like the rest of the form
   CSS, so on any other page the arrow had no size and the button blew up to 796x674 — a giant
   orange circle under the photo field. Scoped to .fcard: nothing else on the page is touched. */
.fcard .btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 16px; padding: 15px 26px;
  border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.fcard .btn svg { width: 18px; height: 18px; flex: none; }
.fcard .btn-primary { background: var(--orange, #F58220); color: #fff; box-shadow: 0 6px 18px -6px rgba(245,130,32,.6); }
.fcard .btn-primary:hover { background: var(--orange-dk, #D96D0F); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .fcard .btn, .fcard .btn:hover { transition: none; transform: none; } }